import { useModal } from 'components/layers';

import { FlyoutMenu } from 'components/FlyoutMenu';
import {
  ShareAudienceModal,
  CreateLookalikeModal,
  DeleteAudienceModal,
} from './modals';

export interface AudienceItemMenuProps {
  audienceId: string;
  parentId: string | null;
  onDismiss: () => void;
}

export const AudienceItemMenu = ({
  audienceId,
  parentId,
  onDismiss,
}: AudienceItemMenuProps) => {
  const shareAudienceModal = useModal(ShareAudienceModal, {
    defaultProps: { audienceId },
  });
  const createLookalikeModal = useModal(CreateLookalikeModal, {
    defaultProps: { audienceId },
  });
  const deleteAudienceModal = useModal(DeleteAudienceModal, {
    defaultProps: { audienceId },
  });

  let options = [
    {
      label: 'Share audience',
      value: 'share',
      onClick: () => shareAudienceModal.show(),
    },
    {
      label: 'Delete audience',
      value: 'delete',
      onClick: () => deleteAudienceModal.show(),
    },
  ];

  if (parentId === null) {
    options = [
      {
        label: 'Create lookalike',
        value: 'create',
        onClick: () => createLookalikeModal.show(),
      },
      ...options,
    ];
  }

  return (
    <FlyoutMenu
      style={{ marginTop: -24 }}
      options={options}
      onDismiss={onDismiss}
      key="AllianceItemMenu"
    />
  );
};