import {
  Box,
  Button,
  CustomModalLayout,
  Heading,
  ModalMobileLayout,
  Text,
} from '@wix/design-system';
import { getImportModalStepProps } from './getImportModalStepProps';
import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useCreateImport } from '@wix/bex-core';
import { ImportButtonModalLayoutProps } from './ImportProps';
import { addEventListener } from '@wix/bex-core/util';
import { useIsMobile } from '../../hooks/useIsMobile';
import { CustomDrawerLayout } from '../CustomDrawerLayout';
import { ImportStepper } from './ImportStepper';
import { MessageActionModal } from '../ActionModal';
import { ModalWrapper } from '../CollectionModal';

function _ImportButtonModalLayout(props: ImportButtonModalLayoutProps) {
  const {
    fields,
    bulkUploadItems,
    backup,
    batchSize,
    importModalState,
    ...rest
  } = props;

  const isMobile = useIsMobile();

  const createImport = useCreateImport({
    fields,
    bulkUploadItems,
    backup,
    batchSize,
    importModalState,
  });

  const [state] = useState(() => createImport());

  const {
    onRequestClose,
    children,
    removeContentPadding,
    ...customModalLayoutProps
  } = getImportModalStepProps({
    state,
    isMobile,
  });

  const wrappedChildren =
    state.currentStep !== 'progress' ? (
      <Box direction="vertical" gap="SP3" width="100%" height="100%">
        <ImportStepper
          state={state}
          removeContentPadding={!removeContentPadding}
        />
        {children}
      </Box>
    ) : (
      children
    );

  useEffect(() => {
    if (onRequestClose) {
      return addEventListener(
        importModalState.events,
        'requestClose',
        onRequestClose,
      );
    }

    return undefined;
  }, [onRequestClose]);

  useEffect(() => state.init(), []);

  const t = state.translate;

  const { modal: discardModal } = state.discardChangesModal;

  if (isMobile) {
    return (
      <>
        <CustomDrawerLayout
          dataHook="import-modal-layout"
          removeContentPadding={removeContentPadding}
          {...rest}
          {...customModalLayoutProps}
          children={wrappedChildren}
        />
        <ModalWrapper
          state={discardModal}
          onAfterClose={() => state.discardChangesModal.afterClose()}
        >
          <ModalMobileLayout
            dataHook="import-discard-changes-modal"
            title={
              <Heading size="small">
                {t('cairo.import.discardChanges.title')}
              </Heading>
            }
            content={
              <Text>{t('cairo.import.discardChanges.description')}</Text>
            }
            onCloseButtonClick={() => discardModal.close()}
            stickyFooter
            footer={
              <Box direction="vertical" gap="SP3">
                <Button
                  dataHook="import-discard-confirm"
                  fullWidth
                  skin="destructive"
                  onClick={() => discardModal.confirm()}
                >
                  {t('cairo.import.discardChanges.confirm')}
                </Button>
                <Button
                  dataHook="import-discard-cancel"
                  fullWidth
                  priority="secondary"
                  onClick={() => discardModal.decline()}
                >
                  {t('cairo.import.discardChanges.cancel')}
                </Button>
              </Box>
            }
          />
        </ModalWrapper>
      </>
    );
  }

  return (
    <>
      <CustomModalLayout
        width="600px"
        maxHeight="80vh"
        dataHook="import-modal-layout"
        removeContentPadding={removeContentPadding}
        {...rest}
        {...customModalLayoutProps}
        children={wrappedChildren}
      />
      <MessageActionModal
        dataHook="import-discard-changes-modal"
        state={state.discardChangesModal}
        title={t('cairo.import.discardChanges.title')}
        content={t('cairo.import.discardChanges.description')}
        primaryButtonText={t('cairo.import.discardChanges.confirm')}
        secondaryButtonText={t('cairo.import.discardChanges.cancel')}
        theme="destructive"
      />
    </>
  );
}

export const ImportButtonModalLayout = observer(_ImportButtonModalLayout);
