import { observer } from 'mobx-react-lite';

import Modal from '@/components/modal/Modal';
import { useContextSelector } from '@/hooks/useContextSelector';
import useDeviceAttributes from '@/hooks/useDeviceAttributes';
import { Playlist } from '@/state/clipStore';

import PlaylistDropdown from '../../createV2/PlaylistDropdown';
import CreateFormContext from '../../v2/CreateFormContext';

export const InspoModal = observer(
  ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
    const { isMobile } = useDeviceAttributes();
    const addInspoPlaylist = useContextSelector(
      CreateFormContext,
      (context) => context.addInspoPlaylist
    );
    const setActiveModal = useContextSelector(
      CreateFormContext,
      (context) => context.setActiveModal
    );
    return !isOpen ? null : (
      <Modal
        onClose={onClose}
        wrapperClasses={`h-auto pt-4 ${isMobile ? 'fixed bottom-0 left-0 right-0 z-50 rounded-t-[32px] bg-background-secondary px-4' : ''}`}
        closeButtonClasses={`absolute right-0 top-0 z-200000`}
      >
        <PlaylistDropdown
          compact
          onSelect={(playlist: Playlist) => {
            addInspoPlaylist(playlist);
            setActiveModal(null);
          }}
        />
      </Modal>
    );
  }
);