import { useMemo } from 'react';

import AddIcon from '@material-hu/icons/material/Add';
import CloseIcon from '@material-hu/icons/material/Close';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import FormTextArea from '@material-hu/components/design-system/Inputs/TextArea/form';

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

import { NEW_GOAL_DESCRIPTION_MAX_LENGTH } from '../constants';

import EditDetails from './EditDetails';

function plainTextLengthFromHtml(html: string | undefined | null) {
  if (!html) return 0;
  return html.replace(/<[^>]*>/g, '').length;
}

type NewGoalFormFieldsProps = {
  isTissur: boolean;
  isSouthbay: boolean;
  hasDescription: boolean;
  onToggleDescription: () => void;
};

function NewGoalFormFields({
  isTissur,
  isSouthbay,
  hasDescription,
  onToggleDescription,
}: NewGoalFormFieldsProps) {
  const { t } = useLokaliseTranslation('goals');

  const toggleDescriptionLabel = useMemo(() => {
    if (isTissur) {
      return hasDescription
        ? t('new.remove_indicators')
        : t('new.add_indicators');
    }
    if (hasDescription) {
      return t('new.remove_description');
    }
    return t(
      isSouthbay ? 'new.add_description_non_optional' : 'new.add_description',
    );
  }, [hasDescription, isSouthbay, isTissur, t]);

  return (
    <>
      <Stack sx={{ mb: 1 }}>
        <HuFormInputClassic
          name="title"
          rules={{ required: true }}
          inputProps={{
            label: t('new.title'),
            size: 'small',
            fullWidth: true,
            maxLength: 255,
          }}
        />
      </Stack>
      <Stack sx={{ gap: 2 }}>
        <Button
          onClick={onToggleDescription}
          variant="text"
          size="small"
          sx={{
            width: 'fit-content',
            color: 'new.text.neutral.brand',
            '& .MuiButton-startIcon': {
              color: 'new.text.neutral.brand',
            },
          }}
          startIcon={
            hasDescription ? (
              <CloseIcon fontSize="small" />
            ) : (
              <AddIcon fontSize="small" />
            )
          }
        >
          <Typography
            variant="globalXS"
            fontWeight="fontWeightSemiBold"
            color="inherit"
            component="span"
          >
            {toggleDescriptionLabel}
          </Typography>
        </Button>
        {hasDescription && (
          <Stack sx={{ mb: 1, gap: 0.5 }}>
            <FormTextArea
              name="description"
              textAreaProps={{
                placeholder: t(
                  isTissur
                    ? 'new.indicators_placeholder'
                    : 'new.description_placeholder',
                ),
                simplifyEditor: true,
              }}
              rules={{
                validate: (value: string) => {
                  const len = plainTextLengthFromHtml(value);
                  if (len > NEW_GOAL_DESCRIPTION_MAX_LENGTH) {
                    return t('new.description_too_long', {
                      max: NEW_GOAL_DESCRIPTION_MAX_LENGTH,
                    });
                  }
                  return true;
                },
              }}
            />
            <Stack
              direction="row"
              justifyContent="space-between"
              alignItems="flex-start"
              gap={1}
            >
              <Typography
                variant="globalS"
                fontWeight="fontWeightRegular"
                color="new.text.neutral.lighter"
                sx={{ flex: 1 }}
              >
                {t('new.description_optional_helper')}
              </Typography>
            </Stack>
          </Stack>
        )}
      </Stack>
      <Divider sx={{ mt: 2, mb: 3 }} />
      <EditDetails />
      <Divider sx={{ mt: 1, mb: 3 }} />
    </>
  );
}

export default NewGoalFormFields;