import { Modal } from '@wix/design-system';
import React, { useState } from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { FiltersMap, ModalState } from '@wix/bex-core';
import { ExportButtonModalLayout } from './ExportButtonModalLayout';
import { observer } from 'mobx-react-lite';
import { ExportModalProps } from './ExportProps';

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

  const [exportModalState] = useState(
    () => (table.exportState ??= new ModalState()),
  );

  return (
    <Modal
      onRequestClose={exportModalState.close}
      isOpen={exportModalState.isOpen}
      dataHook="export-modal"
    >
      <ExportButtonModalLayout {...props} exportModalState={exportModalState} />
    </Modal>
  );
}

export const ExportModal = observer(_ExportModal);
