import { useFormContext, useWatch } from 'react-hook-form';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuSwitcher from '@material-hu/components/design-system/Switcher';

import useRules from 'src/hooks/useRules';
import { InputsIds } from 'src/pages/dashboard/Learning/Paths/constants';
import {
  newPathFields,
  newPathRules,
} from 'src/pages/dashboard/Learning/Paths/New/form';
import { type NewPathFormValues } from 'src/pages/dashboard/Learning/Paths/types';
import { getSwitchersSx } from 'src/pages/dashboard/Learning/Paths/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { transformOnlyNumber } from 'src/utils/inputUtils';

const ConfigurationDeadline = () => {
  const { t } = useLokaliseTranslation('learning');
  const theme = useTheme();

  const deadlineDateRules = useRules(newPathRules.configuration.dueDate());

  const { control, formState, setValue, clearErrors } =
    useFormContext<NewPathFormValues>();

  const deadlineDate = useWatch({
    control,
    name: 'configuration.dueDate',
  });

  const handleOpenDeadlineDate = (open: boolean) => {
    if (!open) {
      clearErrors('configuration.dueDate');
    }
    setValue('configuration.dueDate', open ? '' : null);
  };

  const deadlineDateError = formState.errors.configuration?.dueDate;
  const openDeadlineDateInput = deadlineDate !== null;

  return (
    <HuCardContainer
      fullWidth
      sx={{
        '& .MuiCardContent-root': {
          ...getSwitchersSx(theme),
          gap: 2,
        },
      }}
    >
      <HuSwitcher
        title={t(`common.deadline`)}
        description={t(`path.deadline.description`)}
        value={openDeadlineDateInput}
        onChange={handleOpenDeadlineDate}
      />
      {openDeadlineDateInput && (
        <Stack
          id={InputsIds.CONFIGURATION_DEADLINE}
          sx={{
            flexDirection: 'row',
            alignItems: 'center',
            gap: 1,
            pb: deadlineDateError ? 3 : 0,
          }}
        >
          <Typography sx={{ color: theme.palette.textColors?.neutralText }}>
            {t(`common.deadline_will_be`)}
          </Typography>
          <HuFormInputClassic
            name={newPathFields.configuration.dueDate()}
            rules={deadlineDateRules}
            inputProps={{
              placeholder: t(`common.days`),
              size: 'small',
              showClear: false,
              hasCounter: false,
              transform: transformOnlyNumber(),
              sx: {
                maxWidth: 140,
                '& > p': {
                  position: 'absolute',
                  top: 40,
                  left: 0,
                  zIndex: 1,
                },
              },
            }}
          />
          <Typography sx={{ color: theme.palette.textColors?.neutralText }}>
            {t(`path.deadline.days_from_assignment`)}
          </Typography>
        </Stack>
      )}
    </HuCardContainer>
  );
};

export default ConfigurationDeadline;