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

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

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

import CardContainer from '@material-hu/components/design-system/CardContainer';
import FormInputClassic from '@material-hu/components/design-system/Inputs/Classic/form';
import FormDatePicker from '@material-hu/components/design-system/Inputs/DatePicker/form';
import Skeleton from '@material-hu/components/design-system/Skeleton';
import Title from '@material-hu/components/design-system/Title';

import { useLokaliseTranslation } from 'src/utils/i18n';
import {
  validateDateRequiredRule,
  validateRequiredStringRule,
} from 'src/utils/validation';

import { HourCategoryEditOutletContext } from '../index';

const MAX_DESC_LENGTH = 256;

const GeneralDataTab: FC = () => {
  const { t } = useLokaliseTranslation(['time_tracker', 'general']);

  const { showSkeleton = false } =
    useOutletContext<HourCategoryEditOutletContext>() || {};

  return (
    <>
      <Title
        variant="L"
        title={t('time_tracker:categorized_hours.general_data')}
        description={t(
          'time_tracker:categorized_hours.general_data_description',
        )}
        sx={{ mb: 3 }}
      />
      <Stack sx={{ gap: 2 }}>
        <Skeleton
          isLoading={showSkeleton}
          sx={{
            borderRadius: theme => theme.spacing(2),
            maxWidth: 'unset',
          }}
        >
          <CardContainer sx={{ width: '100%' }}>
            <Stack sx={{ gap: 2 }}>
              <FormInputClassic
                name="name"
                inputProps={{
                  label: t('time_tracker:categorized_hours.name_label'),
                  hasCounter: false,
                  placeholder: t('general:name'),
                }}
                rules={{ validate: validateRequiredStringRule }}
              />
              <FormInputClassic
                name="description"
                inputProps={{
                  label: t('general:inputs.description.label'),
                  hasCounter: true,
                  maxLength: MAX_DESC_LENGTH,
                  multiline: true,
                  minRows: 5,
                  placeholder: t('general:inputs.description.label'),
                }}
              />
              <Stack>
                <Typography
                  variant="globalM"
                  sx={{ fontWeight: 'fontWeightSemiBold' }}
                >
                  {t('time_tracker:categorized_hours.effective_date_label')}
                </Typography>
                <Typography
                  variant="globalXS"
                  sx={{
                    color: theme => theme.palette.new.text.neutral.lighter,
                  }}
                >
                  {t(
                    'time_tracker:categorized_hours.effective_date_description',
                  )}
                </Typography>
                <FormDatePicker
                  name="effectiveFrom"
                  inputProps={{
                    disabled: true,
                    label: undefined,
                    sx: { mt: 1 },
                  }}
                  rules={{ validate: validateDateRequiredRule }}
                />
              </Stack>
            </Stack>
          </CardContainer>
        </Skeleton>
      </Stack>
    </>
  );
};

export default GeneralDataTab;