import { useModal } from 'components/layers';

import { CreateAudienceModal } from 'components/facebook/modals';
import { KlaviyoExportModal } from 'components/klaviyo/modals';
import { FileExportModal } from 'components/collection/modals';
import { FlyoutMenu } from 'components/FlyoutMenu';

interface AllianceSegmentMenuProps {
  allianceId: string;
  collectionId: string;
  toFacebook?: boolean;
  toKlaviyo?: boolean;
  toCSV?: boolean;
  onDismiss?: () => void;
}

function conditionalItem<T>(cond: boolean, item: T) {
  return cond ? [item] : [];
}

export const AllianceExportMenu = ({
  allianceId,
  collectionId,
  toFacebook,
  toKlaviyo,
  toCSV,
  onDismiss,
}: AllianceSegmentMenuProps) => {
  const createAudienceModal = useModal(CreateAudienceModal, {
    defaultProps: { allianceId: allianceId, collectionId: collectionId },
  });

  const klaviyoExportModal = useModal(KlaviyoExportModal, {
    defaultProps: { collectionId: collectionId },
  });

  const fileExportModal = useModal(FileExportModal, {
    defaultProps: { collectionId: collectionId },
  });

  return (
    <FlyoutMenu
      style={{ marginTop: -24 }}
      options={[
        ...conditionalItem(toFacebook === true, {
          label: 'Create Audience...',
          value: 'facebook',
          onClick: () => createAudienceModal.show(),
        }),
        ...conditionalItem(toKlaviyo === true, {
          label: 'Export to Klaviyo...',
          value: 'klaviyo',
          onClick: () => klaviyoExportModal.show(),
        }),
        ...conditionalItem(toCSV === true, {
          label: 'Export as CSV...',
          value: 'csv',
          onClick: () => fileExportModal.show(),
        }),
      ]}
      onDismiss={onDismiss}
      key="AllianceItemMenu"
    />
  );
};