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

export interface ImportRequiredFieldsSideNoteProps {
  state: ImportState;
}

/**
 * Footer side-note shown in the mapping step while required destination fields
 * are unmapped (CAIRO-4452): a red "Missing N required field(s)" line plus an
 * info icon whose tooltip lists which fields. Rendered in the modal's
 * `sideActions` (the footer's left region, in the button row) rather than the
 * full-width footnote strip. The Import button stays enabled — the click is
 * blocked (with a toast) in `ImportState.startImport`.
 */
function _ImportRequiredFieldsSideNote({
  state,
}: ImportRequiredFieldsSideNoteProps) {
  const { translate: t, missingRequiredFields } = state;

  const fieldNames = missingRequiredFields
    .map((field) => field.header || field.id || '')
    .filter(Boolean)
    .join(', ');

  return (
    <Box gap="SP1" verticalAlign="middle" dataHook="import-missing-required">
      <Box verticalAlign="middle" color="R10">
        <StatusAlertFilledSmall />
      </Box>
      <Text size="small" skin="error" dataHook="import-missing-required-text">
        {t('cairo.import.missingRequiredField', {
          count: missingRequiredFields.length,
        })}
      </Text>
      <Tooltip
        appendTo="window"
        fixed={false}
        flip
        content={t('cairo.import.missingRequiredMessage', {
          fields: fieldNames,
        })}
      >
        <Box verticalAlign="middle" color="D40">
          <InfoCircleSmall />
        </Box>
      </Tooltip>
    </Box>
  );
}

export const ImportRequiredFieldsSideNote = observer(
  _ImportRequiredFieldsSideNote,
);