import { type FC } from 'react';
import { useOutletContext } from 'react-router';

import Stack from '@material-hu/mui/Stack';

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuFormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import HuSkeleton from '@material-hu/components/design-system/Skeleton';
import HuTitle from '@material-hu/components/design-system/Title';

import { type PolicyOutletContext } from 'src/types/timeTracking';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { validateRequiredStringRule } from 'src/utils/validation';

import { policiesFields } from '../../form';

const MAX_DESC_LENGTH = 256;

const GeneralStep: FC = () => {
  const { t } = useLokaliseTranslation('time_tracker');

  const { loadingPolicy = false } =
    useOutletContext<PolicyOutletContext>() || {};

  return (
    <>
      <HuTitle
        variant="L"
        title={t('policies.GENERAL_TITLE')}
        description={t('policies.GENERAL_DESCRIPTION')}
        sx={{ mb: 3 }}
      />
      <Stack sx={{ gap: 2 }}>
        <HuSkeleton
          isLoading={loadingPolicy}
          sx={{
            borderRadius: theme => theme.spacing(2),
            maxWidth: 'unset',
          }}
        >
          <HuCardContainer sx={{ width: '100%' }}>
            <HuFormInputClassic
              name={policiesFields.general.name}
              inputProps={{
                label: `${t('policies.POLICY_NAME')} *`,
                hasCounter: false,
                placeholder: t('GENERAL:NAME'),
              }}
              rules={{ validate: validateRequiredStringRule }}
            />
          </HuCardContainer>
        </HuSkeleton>
        <HuSkeleton
          isLoading={loadingPolicy}
          sx={{
            borderRadius: theme => theme.spacing(2),
            maxWidth: 'unset',
          }}
        >
          <HuCardContainer sx={{ width: '100%' }}>
            <HuFormInputClassic
              name={policiesFields.general.description}
              inputProps={{
                label: t('general:inputs.optional', {
                  label: t('policies.POLICY_DESCRIPTION'),
                }),
                placeholder: t('GENERAL:DESCRIPTION'),
                multiline: true,
                maxLength: MAX_DESC_LENGTH,
              }}
            />
          </HuCardContainer>
        </HuSkeleton>
      </Stack>
    </>
  );
};

export default GeneralStep;