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

import { IconCategory2, IconRectangle } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography/Typography';

import SelectionCard from '@material-hu/components/composed-components/SelectionCard';
import Avatar from '@material-hu/components/design-system/Avatar';
import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import Title from '@material-hu/components/design-system/Title';

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

import { CategoryTypes, MAX_CATEGORY_TITLE_LENGTH } from '../../../constants';
import { type CategoryType } from '../../../types';

import CategoriesAutocomplete from './CategoriesAutocomplete';
import { type CreateCategoryFormValues } from './form';

type CreateCategoryFormProps = {
  isLoading: boolean;
};

const CreateCategoryForm = ({ isLoading }: CreateCategoryFormProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { setValue, control } = useFormContext<CreateCategoryFormValues>();

  const categoryType = useWatch({
    name: 'categoryType',
    control,
  });

  const options = [
    {
      Icon: IconRectangle,
      label: t('general:main'),
      description: t('settings.categories.category_selection.main_description'),
      value: CategoryTypes.PRINCIPAL,
    },
    {
      Icon: IconCategory2,
      label: t('general:subcategory'),
      description: t(
        'settings.categories.category_selection.subcategory_description',
      ),
      value: CategoryTypes.SUBCATEGORY,
    },
  ];

  return (
    <Stack sx={{ gap: 2 }}>
      <Typography>{t('settings.categories.create.title')}</Typography>
      <CardContainer
        fullWidth
        color="grey"
      >
        <FormInputClassic
          name="categoryName"
          inputProps={{
            disabled: isLoading,
            label: t('general:category'),
            placeholder: t('general:name'),
            hasCounter: false,
            maxLength: MAX_CATEGORY_TITLE_LENGTH,
          }}
        />
      </CardContainer>
      <CardContainer
        fullWidth
        color="grey"
      >
        <Title
          variant="S"
          title={t('general:category_type')}
        />
        <Stack sx={{ flexDirection: 'row', gap: 2, my: 2 }}>
          {options.map(option => (
            <SelectionCard
              key={option.value}
              disabled={isLoading}
              sx={{
                flex: 1,
                '& .MuiCardContent-root': {
                  gap: 1.5,
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'center',
                  justifyContent: 'center',
                },
              }}
              checked={categoryType === option.value}
              onClick={() =>
                setValue('categoryType', option.value as CategoryType)
              }
            >
              <Avatar
                Icon={option.Icon}
                color={option.value === categoryType ? 'success' : 'primary'}
                variant="square"
              />
              <Title
                variant="M"
                title={option.label}
                description={option.description}
                centered
              />
            </SelectionCard>
          ))}
        </Stack>
        {categoryType === CategoryTypes.SUBCATEGORY && (
          <CategoriesAutocomplete
            name="parentCategory"
            label={t('general:belongs_to')}
            placeholder={t('general:choose')}
            usage="createCategory"
          />
        )}
      </CardContainer>
    </Stack>
  );
};

export default CreateCategoryForm;
