import {
  Box,
  CounterBadge,
  CustomModalLayoutProps,
  Heading,
  Text,
  TextButton,
} from '@wix/design-system';
import { ImportState } from '@wix/bex-core';
import React, { ReactNode } from 'react';
import { ImportStepUpload } from './ImportStepUpload';
import { ImportStepConfiguration } from './ImportStepConfiguration';
import { ImportStepProgress } from './ImportStepProgress';
import { ImportRequiredFieldsSideNote } from './ImportRequiredFieldsSideNote';
import { ImportStepSummary } from './ImportStepSummary';

export interface GetImportModalStepProps {
  state: ImportState;
  isMobile?: boolean;
}

export function getImportModalStepProps({
  state,
  isMobile,
}: GetImportModalStepProps): Partial<
  CustomModalLayoutProps & { children?: ReactNode; onRequestClose?: () => void }
> {
  const { currentStep, translate: t } = state;

  if (currentStep === 'upload') {
    return {
      title: t('cairo.import.title'),
      subtitle: t('cairo.import.subtitle'),
      children: <ImportStepUpload state={state} />,
      footnote: (
        <Box gap="SP1" verticalAlign="middle">
          <Text size="small" secondary>
            {t('cairo.import.footerText')}
          </Text>
          <TextButton
            size="small"
            as="a"
            href="https://support.wix.com/en/article/import-data-from-a-file"
            target="_blank"
            rel="noopener"
          >
            {t('cairo.import.footerLink')}
          </TextButton>
        </Box>
      ),
      showFooterDivider: false,
      secondaryButtonText: t('cairo.import.cancel'),
      secondaryButtonOnClick: state.close,
      closeButtonProps: { onClick: state.close, autoFocus: true },
      onRequestClose: state.close,
    };
  }

  if (currentStep === 'configuration') {
    const handleClose = () => state.discardAndClose();

    return {
      removeContentPadding: true,
      title: isMobile ? (
        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
          {t('cairo.import.configureMappingsTitle')}
          <CounterBadge
            size="medium"
            skin="neutralLight"
            dataHook="import-columns-found-counter"
          >
            {state.csvHeaders.length}
          </CounterBadge>
        </Box>
      ) : (
        <Box gap="SP1" verticalAlign="middle" direction="horizontal">
          <Heading size="medium">
            {t('cairo.import.configureMappingsTitle')}
          </Heading>
          <CounterBadge
            size="medium"
            skin="neutralLight"
            dataHook="import-columns-found-counter"
          >
            {state.csvHeaders.length}
          </CounterBadge>
        </Box>
      ),
      subtitle: t('cairo.import.subtitle'),
      children: <ImportStepConfiguration state={state} />,
      // Left-aligned footer side-note while required fields are unmapped
      // (CAIRO-4452). Sits in the footer's button row (`sideActions`), not the
      // full-width footnote strip. The Import button stays enabled; the click is
      // blocked with a toast in `startImport`.
      sideActions: state.hasMissingRequiredFields ? (
        <ImportRequiredFieldsSideNote state={state} />
      ) : undefined,
      showFooterDivider: true,
      primaryButtonText: t('cairo.import.startImport'),
      primaryButtonOnClick: state.hasMappings ? state.startImport : undefined,
      ...(isMobile
        ? { primaryButtonProps: { disabled: !state.hasMappings } }
        : {
            primaryButtonTooltipProps: !state.hasMappings
              ? { content: t('cairo.import.noMappingsTooltip') }
              : undefined,
          }),
      secondaryButtonText: t('cairo.import.cancel'),
      secondaryButtonOnClick: handleClose,
      closeButtonProps: {
        onClick: handleClose,
        autoFocus: true,
      },
      onRequestClose: handleClose,
    };
  }

  if (currentStep === 'summary') {
    const { succeeded, failed } = state.result;
    const hasFailures = failed > 0;

    return {
      title: t('cairo.import.summaryTitle', {
        imported: String(succeeded),
        total: state.totalCount,
      }),
      children: <ImportStepSummary state={state} />,
      showFooterDivider: false,
      // When rows failed, "Download CSV" is the primary (emphasized) action and
      // "Close" the secondary — the user's next step is to fix the failures. A
      // fully successful import has nothing to download, so "Close" is primary
      // and stands alone.
      ...(hasFailures
        ? {
            primaryButtonText: t('cairo.import.downloadCsv'),
            primaryButtonOnClick: state.downloadFailedRows,
            secondaryButtonText: t('cairo.import.close'),
            secondaryButtonOnClick: state.done,
          }
        : {
            primaryButtonText: t('cairo.import.close'),
            primaryButtonOnClick: state.done,
          }),
      closeButtonProps: { onClick: state.done, autoFocus: true },
      onRequestClose: state.done,
    };
  }

  const hasError = state.importStatus.isError;

  return {
    title: hasError
      ? t('cairo.import.failedTitle')
      : t('cairo.import.progressTitle'),
    children: <ImportStepProgress state={state} />,
    showFooterDivider: false,
    primaryButtonText: hasError
      ? t('cairo.import.tryAgain')
      : t('cairo.import.importing'),
    primaryButtonOnClick: hasError ? state.startImport : undefined,
    primaryButtonProps: { disabled: !hasError },
    secondaryButtonText: state.isRestoring
      ? t('cairo.import.restoring')
      : t('cairo.import.cancel'),
    secondaryButtonOnClick: state.close,
    secondaryButtonProps: { disabled: state.isRestoring },
    closeButtonProps: { onClick: state.close },
    onRequestClose: state.isRestoring ? undefined : state.close,
  };
}