import { type FC } from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useNavigate } from 'react-router';

import Close from '@material-hu/icons/material/Close';
import Divider from '@material-hu/mui/Divider';
import IconButton from '@material-hu/mui/IconButton';
import Paper from '@material-hu/mui/Paper';
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 { settingsRoutes } from 'src/pages/dashboard/Settings/routes';
import {
  type PositionBody,
  PositionErrors,
  type PositionMutate,
} from 'src/types/positions';
import { SettingsTabKeys } from 'src/types/settings';
import { hasErrors } from 'src/utils/formUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import FormTextField from 'src/components/FormInputs/FormTextField';

import { DESCRIPTION_MAX_LENGTH, NAME_MAX_LENGTH } from './constants';

export type PositionFormProps = {
  title: string;
  submitLoading?: boolean;
  submitLabel?: string;
  onSubmit: PositionMutate;
  defaultValues?: PositionBody;
};

export const PositionForm: FC<PositionFormProps> = ({
  title,
  submitLoading = false,
  submitLabel = title,
  onSubmit,
  defaultValues = {
    name: '',
    description: '',
  },
}) => {
  const { t } = useLokaliseTranslation('settings');
  const navigate = useNavigate();

  const form = useForm({
    defaultValues,
    mode: 'onChange',
  });

  const {
    handleSubmit,
    setError,
    formState: { errors },
  } = form;

  const handleBack = () => {
    navigate(settingsRoutes.general(), {
      state: { selectedTab: SettingsTabKeys.POSITIONS },
    });
  };

  const submit = (values: PositionBody) => {
    onSubmit(values, {
      onSuccess: () => handleBack(),
      onError: error => {
        if (error.response?.data?.code === PositionErrors.DUPLICATE) {
          setError('name', {
            type: 'custom',
            message: t('GENERAL.POSITIONS_TAB.DUPLICATE_NAME_ERROR'),
          });
        }
      },
    });
  };

  const disabled = hasErrors(errors);

  return (
    <FormProvider {...form}>
      <Stack>
        <Stack
          sx={{
            backgroundColor: 'white',
            height: '100%',
          }}
        >
          <Stack
            sx={{
              flexDirection: 'row',
              alignItems: 'center',
              height: '64px',
              px: 3,
              py: 2,
            }}
          >
            <IconButton
              sx={{ mr: 2 }}
              onClick={handleBack}
            >
              <Close />
            </IconButton>
            <Typography
              variant="h5"
              sx={{
                display: 'inline',
                mr: 2,
                maxLines: 1,
                maxWidth: 600,
                overflow: 'hidden',
                textOverflow: 'ellipsis',
                whiteSpace: 'nowrap',
              }}
            >
              {title}
            </Typography>
          </Stack>
          <Divider />
        </Stack>
        <Stack
          component={Paper}
          sx={{
            alignSelf: 'center',
            minWidth: '810px',
            gap: 3,
            borderRadius: '20px',
            p: 3,
            mt: 3,
          }}
        >
          <Stack sx={{ gap: 2 }}>
            <Typography variant="h4">
              {t('GENERAL.POSITIONS_TAB.DETAILS')}
            </Typography>
            <Divider />
          </Stack>
          <FormTextField
            name="name"
            label={t('GENERAL.POSITIONS_TAB.NAME_LABEL')}
            placeholder={t('GENERAL.POSITIONS_TAB.NAME_PLACEHOLDER')}
            autoFocus
            required
            maxLength={NAME_MAX_LENGTH}
          />
          <Stack>
            <FormTextField
              name="description"
              label={t('GENERAL.POSITIONS_TAB.DESCRIPTION_LABEL')}
              placeholder={t('GENERAL.POSITIONS_TAB.DESCRIPTION_PLACEHOLDER')}
              maxLength={DESCRIPTION_MAX_LENGTH}
              inputProps={{ sx: { minHeight: '80px' } }}
              multiline
              showCounter
            />
            <Button
              variant="contained"
              onClick={handleSubmit(submit)}
              disabled={disabled}
              loading={submitLoading}
              sx={{ alignSelf: 'flex-end' }}
            >
              {submitLabel}
            </Button>
          </Stack>
        </Stack>
      </Stack>
    </FormProvider>
  );
};

export default PositionForm;