import { Drawer, Modal } from '@wix/design-system';
import React, { useState } from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { FiltersMap, ModalState } from '@wix/bex-core';
import { ImportButtonModalLayout } from './ImportButtonModalLayout';
import { observer } from 'mobx-react-lite';
import { ImportModalProps } from './ImportProps';
import { useIsMobile } from '../../hooks/useIsMobile';

function _ImportModal<T, F extends FiltersMap>(props: ImportModalProps) {
  const table = useToolbarCollectionContext<T, F>();

  const [importModalState] = useState(
    () => (table.importState ??= new ModalState()),
  );

  const isMobile = useIsMobile();

  const child = (
    <ImportButtonModalLayout {...props} importModalState={importModalState} />
  );

  if (isMobile) {
    return (
      <Drawer
        dataHook="import-modal"
        open={importModalState.isOpen}
        onClose={importModalState.close}
      >
        {child}
      </Drawer>
    );
  }

  return (
    <Modal
      onRequestClose={importModalState.close}
      isOpen={importModalState.isOpen}
      dataHook="import-modal"
    >
      {child}
    </Modal>
  );
}

export const ImportModal = observer(_ImportModal);