import { Box, Text } from '@wix/design-system';
import {
  StatusAlertFilled,
  StatusCompleteFilled,
} from '@wix/wix-ui-icons-common';
import { ImportState } from '@wix/bex-core';
import React from 'react';
import { observer } from 'mobx-react-lite';

export interface ImportStepSummaryProps {
  state: ImportState;
}

function CountRow({
  icon,
  color,
  children,
}: {
  icon: React.ReactNode;
  color: string;
  children: React.ReactNode;
}) {
  return (
    <Box gap="SP2" verticalAlign="middle">
      <Box align="center" verticalAlign="middle" color={color}>
        {icon}
      </Box>
      <Box direction="vertical">{children}</Box>
    </Box>
  );
}

function _ImportStepSummary({ state }: ImportStepSummaryProps) {
  const { result, translate: t } = state;
  const { created, updated, failed } = result;

  return (
    <Box
      direction="vertical"
      gap="SP3"
      width="100%"
      dataHook="import-summary-step"
    >
      {created > 0 && (
        <CountRow icon={<StatusCompleteFilled />} color="G10">
          <Text dataHook="import-summary-created">
            {t('cairo.import.summaryCreated', { count: created })}
          </Text>
        </CountRow>
      )}
      {updated > 0 && (
        <CountRow icon={<StatusCompleteFilled />} color="G10">
          <Text dataHook="import-summary-updated">
            {t('cairo.import.summaryUpdated', { count: updated })}
          </Text>
        </CountRow>
      )}
      {failed > 0 && (
        <CountRow icon={<StatusAlertFilled />} color="R10">
          <Text dataHook="import-summary-failed">
            {t('cairo.import.summaryFailed', { count: failed })}
          </Text>
          <Text size="small" secondary dataHook="import-summary-failed-hint">
            {t('cairo.import.summaryFailedHint')}
          </Text>
        </CountRow>
      )}
    </Box>
  );
}

export const ImportStepSummary = observer(_ImportStepSummary);