import {
  Box,
  CustomModalLayoutProps,
  Text,
  TextButton,
} from '@wix/design-system';
import { ExportState, FiltersMap } from '@wix/bex-core';
import React, { ReactNode } from 'react';
import { ExportStepConfig } from './ExportStepConfig';
import { ExportStepProgress } from './ExportStepProgress';
import { ExportStepError } from './ExportStepError';
import { ExportStepCancel } from './ExportStepCancel';
import {
  getExportModalErrorProps,
  RenderModalError,
} from './getExportModalErrorProps';

export interface GetExportModalStepProps<T, F extends FiltersMap> {
  state: ExportState<T, F>;
  renderError?: RenderModalError;
  exportModalFooter?: { text: string };
  exportModalTitle?: string;
  onProgressModalTitle?: string;
  exportToCSVMessage?: string;
}

export function getExportModalStepProps<T, F extends FiltersMap>({
  state,
  renderError,
  exportModalFooter,
  exportModalTitle,
  exportToCSVMessage,
  onProgressModalTitle,
}: GetExportModalStepProps<T, F>): Partial<
  CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
> {
  const { currentStep, translate: t } = state;

  if (currentStep === 'cancel') {
    return {
      title: t('cairo.export.cancelTheExport'),
      children: <ExportStepCancel state={state} />,
      primaryButtonText: t('cairo.export.cancelTheExportConfirm'),
      secondaryButtonText: t('cairo.export.cancelTheExportGoBack'),
      secondaryButtonProps: { skin: 'destructive' },
      primaryButtonProps: { skin: 'destructive', disabled: false },
      primaryButtonOnClick: () => state.onCancelExportVerifyButtonClick(),
      secondaryButtonOnClick: state.onCancelExportGoBackButtonClick,
      closeButtonProps: { onClick: state.onCancelExportCloseButtonClick, autoFocus: true },
      onRequestClose: state.onCancelExportCloseButtonClick,
    };
  }

  if (currentStep === 'config') {
    return {
      title: exportModalTitle || t('cairo.export.exportTypeQuestionTitle'),
      children: (
        <ExportStepConfig
          state={state}
          exportToCSVMessage={exportToCSVMessage}
        />
      ),
      primaryButtonText: t('cairo.export.export'),
      primaryButtonOnClick: state.onExportToClick,
      secondaryButtonText: t('cairo.export.cancelButton'),
      secondaryButtonOnClick: state.onCancelClick,
      closeButtonProps: { onClick: state.onCloseClick, autoFocus: true },
      onRequestClose: state.onCloseClick,
      footnote: exportModalFooter ? (
        <Text dataHook="export-modal-footer-text" size="small">
          {exportModalFooter?.text}
        </Text>
      ) : null,
    };
  }

  if (currentStep === 'error') {
    const modalProps = getExportModalErrorProps({ state, renderError });
    return {
      title: t('cairo.export.exportFailed'),
      secondaryButtonText: t('cairo.export.cancelButton'),
      secondaryButtonOnClick: state.onFailedCancel,
      closeButtonProps: { onClick: state.onFailedClose, autoFocus: true },
      onRequestClose: state.onFailedClose,
      primaryButtonText: t('Got It' as any),
      primaryButtonOnClick: state.onFailedClose,
      ...modalProps,
      children: (
        <ExportStepError state={state}>
          {modalProps.children ?? (
            <Box direction="vertical">
              <Text widows>{t('cairo.export.serverErrorMessage')}</Text>
              <TextButton
                dataHook="export-error-message-action"
                as="a"
                onClick={state.onRetryExportToClick}
              >
                {t('cairo.export.tryAgain')}
              </TextButton>
            </Box>
          )}
        </ExportStepError>
      ),
    };
  }

  // exporting
  return {
    title: onProgressModalTitle || t('cairo.export.exportingTitle'),
    children: <ExportStepProgress state={state} />,
    primaryButtonText: t('cairo.export.exporting'),
    primaryButtonProps: {
      disabled: true,
    },
    closeButtonProps: { onClick: state.onExportCloseAttemptClick, autoFocus: true },
    onRequestClose: state.onExportCloseAttemptClick,
    secondaryButtonText: t('cairo.export.cancelButton'),
    secondaryButtonOnClick: state.onExportSecondaryActionAttempt,
  };
}