import { type FC, useEffect, useMemo } from 'react';
import { useFormContext, useWatch } from 'react-hook-form';

import Divider from '@material-hu/mui/Divider';
import { Stack, Typography } from '@material-hu/mui/index';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormAutoComplete from '@material-hu/components/design-system/Inputs/Autocomplete/form';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuTitle from '@material-hu/components/design-system/Title';

import usePolicyTypes from 'src/hooks/queryHooks/usePolicyTypes';
import { type Policy } from 'src/types/vacations';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredStringRule } from 'src/utils/validation';

import CircularProgress from 'src/components/CircularProgress';

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

type Props = {
  policy: Policy;
};

const MAX_LENGTH_DESCRIPTION = 1500;
const MAX_LENGTH_NAME = 255;

const DetailsStep: FC<Props> = ({ policy }) => {
  const { t } = useLokaliseTranslation('time_off');
  const { setValue, control } = useFormContext();

  const { data: policyTypes = [], isLoading } = usePolicyTypes({
    enabled: !policy,
    select: r => r.data,
  });

  const policyTypeId = useWatch({
    control,
    name: policyFormFields.details.policyTypeId,
  });

  useEffect(() => {
    if (policyTypeId?.value && policyTypes.length > 0) {
      setValue(
        policyFormFields.details.unit,
        policyTypes.find(pt => pt.id === policyTypeId?.value)?.unit,
      );
    }
  }, [policyTypeId]);

  const policyTypesOptions = useMemo(() => {
    if (policy) {
      return [
        {
          label: policy.policyType.name,
          value: policy.policyType.id,
        },
      ];
    }

    return policyTypes.map(pt => ({
      label: pt?.name,
      value: pt?.id,
    }));
  }, [policyTypes]);

  if (isLoading) {
    return <CircularProgress centered />;
  }

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography
        variant="globalL"
        sx={{ fontWeight: 'fontWeightSemiBold' }}
      >
        {t('DETAILS')}
      </Typography>
      <Stack sx={{ gap: 1.5 }}>
        <Typography
          variant="globalM"
          sx={{ fontWeight: 'fontWeightSemiBold' }}
        >
          {t('type')}
        </Typography>
        <CardContainer fullWidth>
          <FormAutoComplete
            name={policyFormFields.details.policyTypeId}
            options={policyTypesOptions}
            autocompleteProps={{
              label: t('policy_type_one'),
              disabled: !!policy,
              placeholder: t('general:select_option'),
              isServerFiltered: false,
            }}
            rules={{
              required: {
                value: true,
                message: t('general:required_field'),
              },
            }}
          />
        </CardContainer>
      </Stack>
      <Stack sx={{ gap: 1.5 }}>
        <HuTitle
          variant="M"
          title={t('policy_details')}
          description={t('add_detail_fields')}
        />

        <CardContainer fullWidth>
          <Stack sx={{ gap: 1.5 }}>
            <CardContainer
              color="grey"
              fullWidth
            >
              <FormInputClassic
                name={policyFormFields.details.name}
                inputProps={{
                  label: t('policy_name'),
                  maxLength: MAX_LENGTH_NAME,
                  placeholder: t('enter_name'),
                  helperText: t('policy_name_helper_text'),
                }}
                rules={{ validate: validateRequiredStringRule }}
              />
            </CardContainer>
            <Divider sx={{ my: 1 }} />
            <CardContainer
              color="grey"
              fullWidth
            >
              <FormInputClassic
                name={policyFormFields.details.description}
                inputProps={{
                  label: t('policy_description'),
                  placeholder: t('general:enter_description'),
                  multiline: true,
                  minRows: 5,
                  maxLength: MAX_LENGTH_DESCRIPTION,
                }}
              />
            </CardContainer>
          </Stack>
        </CardContainer>
      </Stack>
    </Stack>
  );
};

export default DetailsStep;