import { useModal } from 'components/layers';

import { Menu, MenuItem } from 'components/Menu';
import { CreateAudienceModal } from 'components/facebook/modals';
import { KlaviyoExportModal } from 'components/klaviyo/modals';
import { FileExportModal } from './modals/FileExportModal';

interface ExportMenuProps {
  selected: string[];
  onDismiss?: () => void;
}

export const ExportMenu = ({ selected, onDismiss }: ExportMenuProps) => {
  const defaultProps = { collectionId: selected[0] };
  const createAudienceModal = useModal(CreateAudienceModal, {
    defaultProps,
  });

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

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

  const handleClick = (key: string) => {
    switch (key) {
      case 'facebook':
        return createAudienceModal.show();
      case 'klaviyo':
        return klaviyoExportModal.show();
      case 'csv':
        return fileExportModal.show();
      default:
        break;
    }
  };

  return (
    <Menu onClick={handleClick} onDismiss={onDismiss}>
      <MenuItem key="facebook">Create audience...</MenuItem>
      <MenuItem key="klaviyo">Export to Klaviyo....</MenuItem>
      <MenuItem key="csv">Export as CSV...</MenuItem>
    </Menu>
  );
};