import Slide from '@material-hu/mui/Slide';
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 { useLokaliseTranslation } from 'src/utils/i18n';

import { NOTES_MAX_LENGTH } from '../../constants';
import { shiftFormFields } from '../../form';
import GeneralDataSection from '../CustomShiftsDrawer/components/GeneralDataSection';
import PeriodSection from '../CustomShiftsDrawer/components/PeriodSection';

const EditTemplate = () => {
  const { t } = useLokaliseTranslation(['shifts', 'general']);
  const { palette } = useTheme();

  return (
    <Slide
      direction="left"
      in
      timeout={300}
      mountOnEnter
    >
      <Stack sx={{ gap: 1 }}>
        <GeneralDataSection isCreatingTemplate />
        <PeriodSection isCreatingTemplate />
        <>
          <Typography
            variant="globalM"
            sx={{ fontWeight: 'fontWeightSemiBold' }}
          >
            {t('general:more_info')}
          </Typography>
          <HuCardContainer
            sx={{
              backgroundColor: palette.new.background.layout.default,
              border: 'unset',
              overflow: 'visible',
            }}
            fullWidth
          >
            <HuFormInputClassic
              name={shiftFormFields.notes}
              inputProps={{
                placeholder: t('work_schedules:write_schedule_description'),
                label: t('general:description'),
                multiline: true,
                minRows: 3,
                maxRows: 6,
                maxLength: NOTES_MAX_LENGTH,
                hasCounter: true,
              }}
            />
          </HuCardContainer>
        </>
      </Stack>
    </Slide>
  );
};

export default EditTemplate;
