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

import Stack from '@material-hu/mui/Stack';
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 HuFormDatePicker from '@material-hu/components/design-system/Inputs/DatePicker/form';
import HuFormInputSelect from '@material-hu/components/design-system/Inputs/Select/form';
import HuTitle from '@material-hu/components/design-system/Title';

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

import { useValidations } from '../../hooks/useValidations';
import { FieldTypes } from '../../types';
import { hoursOptions, minutesOptions } from '../../utils';

import FormImagePreviewer from './FormImagePreviewer';

enum HourTypes {
  HOUR = 'HH',
  MINUTES = 'MM',
}

const dimensions = {
  width: 750,
  height: 375,
};

export const DetailsStep: FC = () => {
  const { t } = useLokaliseTranslation('events');
  const {
    requiredRules,
    validateEndDate,
    validateEndHoursTime,
    validateEndMinutesTime,
  } = useValidations();

  const { setFocus, watch } = useFormContext();

  const imagePreview = watch(FieldTypes.IMAGE_PREVIEW);

  useEffect(() => {
    setFocus(FieldTypes.NAME);
  }, []);

  const showImagePreview = imagePreview?.file || !imagePreview?.url;

  return (
    <Stack>
      <HuTitle
        title={t('DEFINE_EVENT_GENERAL')}
        variant="M"
      />
      <HuCardContainer sx={{ width: '100%', mt: 3, p: 1 }}>
        <HuFormInputClassic
          inputProps={{
            placeholder: t('CREATE_EVENT_FORM.NAME_PLACEHOLDER'),
            label: t('CREATE_EVENT_FORM.NAME_LABEL'),
          }}
          name={FieldTypes.NAME}
          rules={requiredRules}
        />
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', mt: 2, pb: '50px', p: 1 }}>
        <Typography
          variant="globalS"
          fontWeight="semiBold"
          sx={{ mb: 2, display: 'block' }}
        >
          {t('COVER_PICTURE')}
        </Typography>
        {showImagePreview && (
          <FormImagePreviewer
            name={FieldTypes.IMAGE_PREVIEW}
            recommendedHeight={dimensions.height}
            recommendedWidth={dimensions.width}
          />
        )}
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', mt: 2, p: 1 }}>
        <Stack sx={{ flexDirection: 'row', gap: 2 }}>
          <HuFormDatePicker
            name={FieldTypes.START_DATE}
            inputProps={{
              label: t('CREATE_EVENT_FORM.START_DATE_LABEL'),
              minDate: new Date(),
            }}
            rules={requiredRules}
          />
          <HuFormInputSelect
            name={FieldTypes.START_HOURS_TIME}
            inputProps={{
              label: t('CREATE_EVENT_FORM.START_TIME_LABEL'),
              placeholder: HourTypes.HOUR,
              options: hoursOptions,
            }}
            rules={requiredRules}
          />
          <HuFormInputSelect
            name={FieldTypes.START_MINUTES_TIME}
            inputProps={{
              placeholder: HourTypes.MINUTES,
              options: minutesOptions,
              sx: { mt: 3 },
            }}
            rules={requiredRules}
          />
        </Stack>
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', mt: 2, p: 1 }}>
        <Stack sx={{ flexDirection: 'row', gap: 2 }}>
          <HuFormDatePicker
            name={FieldTypes.END_DATE}
            inputProps={{
              label: t('CREATE_EVENT_FORM.END_DATE_LABEL'),
              minDate: new Date(),
            }}
            rules={validateEndDate}
          />

          <HuFormInputSelect
            name={FieldTypes.END_HOURS_TIME}
            inputProps={{
              label: t('CREATE_EVENT_FORM.END_TIME_LABEL'),
              placeholder: HourTypes.HOUR,
              options: hoursOptions,
              allowClear: true,
            }}
            rules={validateEndHoursTime}
          />
          <HuFormInputSelect
            name={FieldTypes.END_MINUTES_TIME}
            inputProps={{
              placeholder: HourTypes.MINUTES,
              options: minutesOptions,
              allowClear: true,
              sx: { marginTop: 3 },
            }}
            rules={validateEndMinutesTime}
          />
        </Stack>
      </HuCardContainer>
      <HuCardContainer sx={{ width: '100%', mt: 2, p: 1 }}>
        <HuFormInputClassic
          name={FieldTypes.DESCRIPTION}
          inputProps={{
            multiline: true,
            label: t('CREATE_EVENT_FORM.DESCRIPTION_LABEL'),
            placeholder: t('CREATE_EVENT_FORM.DESCRIPTION_PLACEHOLDER'),
            maxLength: 1500,
          }}
          rules={requiredRules}
        />
      </HuCardContainer>
    </Stack>
  );
};

export default DetailsStep;