import React, { useEffect, useState } from 'react';
import { FiltersMap, ModalState } from '@wix/bex-core';
import { Button, Drawer, Modal } from '@wix/design-system';
import { UploadExport } from '@wix/wix-ui-icons-common/lazy';
import { observer, Observer } from 'mobx-react-lite';
import { ExportButtonModalLayout } from './ExportButtonModalLayout';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { ExportButtonProps } from './ExportProps';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
import { useIsMobile } from '../../hooks/useIsMobile';

function _ExportButton<T, F extends FiltersMap>(
  props: ExportButtonProps<T, F>,
) {
  const {
    toolbarType = 'default',
    renderError,
    transformPlatformizedQuery,
    differentQueryEndpointThanCollection,
    customTotal,
    methodMetadata,
    arrayFieldDelimiter,
    methodSpec,
    fields,
    saveAs,
    exportModalFooter,
    exportModalTitle,
    onProgressModalTitle,
    exportToCSVMessage,
  } = props;

  const table = useToolbarCollectionContext<T, F>();

  const {
    toolbar: { responsive },
  } = table;

  const { translate: t } = useWixPatternsContainer();

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

  const isMobile = useIsMobile();

  useEffect(() => {
    table.featuredComponents.exportModal.set(
      <Observer>
        {() => {
          const child = (
            <ExportButtonModalLayout
              exportModalState={state}
              renderError={renderError}
              transformPlatformizedQuery={transformPlatformizedQuery}
              customTotal={customTotal}
              arrayFieldDelimiter={arrayFieldDelimiter}
              differentQueryEndpointThanCollection={
                differentQueryEndpointThanCollection
              }
              methodMetadata={methodMetadata}
              methodSpec={methodSpec}
              fields={fields}
              saveAs={saveAs}
              exportModalFooter={exportModalFooter}
              exportModalTitle={exportModalTitle}
              onProgressModalTitle={onProgressModalTitle}
              exportToCSVMessage={exportToCSVMessage}
            />
          );

          if (isMobile) {
            return (
              <Drawer
                dataHook="export-modal"
                open={state.isOpen}
                onClose={state.requestClose}
              >
                {child}
              </Drawer>
            );
          }

          return (
            <Modal
              onRequestClose={state.requestClose}
              isOpen={state.isOpen}
              dataHook="export-modal"
            >
              {child}
            </Modal>
          );
        }}
      </Observer>,
    );

    return () => {
      table.featuredComponents.exportModal.set(null);
    };
  }, []);

  return (
    <div data-hook="export-container">
      {toolbarType === 'default' ? (
        <ResponsiveButton
          state={responsive.actions}
          dataHook="export-button"
          onClick={state.open}
          icon={<UploadExport />}
        >
          {t('cairo.export.export')}
        </ResponsiveButton>
      ) : (
        <Button
          skin="standard"
          priority="secondary"
          size="small"
          ellipsis
          prefixIcon={<UploadExport />}
          dataHook="export-button"
          onClick={state.open}
        >
          {t('cairo.export.export')}
        </Button>
      )}
    </div>
  );
}

export const ExportButton = observer(_ExportButton);