import { type FC } from 'react';
import { useFormContext } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuToggle from '@material-hu/components/design-system/Toggle';

import { useLokaliseTranslation } from 'src/utils/i18n';
import { truncateText } from 'src/utils/stringUtils';

import { type SectionCreationSteps, Step } from '../../../types';
import { DESCRIPTION_MIN_LENGTH, NAME_MIN_LENGTH } from '../../constants';

import RowItem from './RowItem';

type Props = {
  showValidations: boolean;
};

function getFieldErrorMessage(
  value: string,
  minLength: number,
  requiredMsg: string,
  minLengthMsg: string,
): string | undefined {
  if (!value) return requiredMsg;
  if (value.length < minLength) return minLengthMsg;
  return undefined;
}

const BasicInfoValues: FC<Props> = ({ showValidations }) => {
  const { t } = useLokaliseTranslation([
    'service_management',
    'general',
    'validations',
  ]);
  const { watch } = useFormContext<SectionCreationSteps>();
  const values = watch(Step.BASIC_INFORMATION);

  const rows = [
    {
      label: t('service_item_name'),
      value: (
        <Typography
          variant="globalS"
          textAlign="right"
        >
          {values.name}
        </Typography>
      ),
      errorMessage: showValidations
        ? getFieldErrorMessage(
            values.name,
            NAME_MIN_LENGTH,
            t('validations:required_field'),
            t('validations:min_length', { count: NAME_MIN_LENGTH }),
          )
        : undefined,
    },
    {
      label: t('description_short'),
      value: (
        <Typography
          variant="globalS"
          textAlign="right"
        >
          {values.description}
        </Typography>
      ),
      errorMessage: showValidations
        ? getFieldErrorMessage(
            values.description,
            DESCRIPTION_MIN_LENGTH,
            t('validations:required_field'),
            t('validations:min_length', { count: DESCRIPTION_MIN_LENGTH }),
          )
        : undefined,
    },
    {
      label: t('description'),
      value: values.richDescription ? (
        <Typography
          variant="globalS"
          textAlign="right"
          sx={{ wordBreak: 'break-word' }}
        >
          {truncateText(values.richDescription, 200).truncated}
        </Typography>
      ) : null,
    },
    {
      label: t('automatic_response_message'),
      value: values.automaticMessage ? (
        <Typography
          variant="globalS"
          textAlign="right"
          sx={{ wordBreak: 'break-word' }}
        >
          {truncateText(values.automaticMessage, 200).truncated}
        </Typography>
      ) : null,
    },
    {
      label: t('cover_image'),
      value: (
        <Stack
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            justifyContent: 'flex-end',
          }}
        >
          <HuToggle
            disabled
            checked={values.coverPictureEnabled}
            onChange={() => undefined}
          />
          <Typography variant="globalS">
            {values.coverPictureEnabled ? t('general:yes') : t('general:no')}
          </Typography>
        </Stack>
      ),
    },
  ];

  return (
    <Stack>
      {rows.map(({ label, value, errorMessage }, index) => (
        <RowItem
          key={label}
          label={label}
          value={value}
          errorMessage={errorMessage}
          showDivider={index !== rows.length - 1}
        />
      ))}
    </Stack>
  );
};

export default BasicInfoValues;