import { useModal } from 'components/layers';

import { RenameCollectionModal } from 'components/collection/modals/RenameCollectionModal';
import { DeleteCollectionModal } from 'components/collection/modals/DeleteCollectionModal';

import { MenuItemWithEmoji } from 'components/MenuItemWithEmoji';
import { call } from 'utils/call';

export const DatasetItemMenu = ({
  data,
  onDismiss,
}: {
  data: { id: string; name: string };
  onDismiss?: () => void;
}) => {
  const deleteCollectionModal = useModal(DeleteCollectionModal, {
    defaultProps: { collectionId: data.id },
  });
  const renameDatasetModal = useModal(RenameCollectionModal, {
    defaultProps: { collectionId: data.id, value: data.name },
  });

  const handleClick = (fn: any) => () => {
    call(fn);
    call(onDismiss);
  };

  return (
    <div className="flyout" style={{ width: 140, marginTop: -24 }}>
      <MenuItemWithEmoji
        label="Rename"
        icon="✏️"
        onClick={handleClick(renameDatasetModal.show)}
      />
      <MenuItemWithEmoji
        label="Delete"
        icon="🗑️"
        onClick={handleClick(deleteCollectionModal.show)}
      />
    </div>
  );
};