import { FormProvider, useForm } from 'react-hook-form';

import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

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

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

import { MAX_CONTENT_WIDTH } from '../../constants';
import { type BasicInfoValues } from '../types';

import StepLayout from './StepLayout';

interface Props {
  initialValues: BasicInfoValues;
  onNext: (values: BasicInfoValues) => void;
}

const BasicInfoStep = ({ initialValues, onNext }: Props) => {
  const { t } = useLokaliseTranslation('sportsPool');

  const schema = yup.object({
    name: yup
      .string()
      .min(3, t('admin.basic_info.name_min'))
      .max(80, t('admin.basic_info.name_max'))
      .required(t('admin.basic_info.name_required')),
  });

  const methods = useForm<BasicInfoValues>({
    resolver: yupResolver(schema),
    defaultValues: initialValues,
    mode: 'onChange',
  });

  const handleSubmit = methods.handleSubmit(values => onNext(values));

  return (
    <FormProvider {...methods}>
      <StepLayout
        onNext={handleSubmit}
        slotProps={{
          submitButton: { type: 'submit', form: 'basic-info-form' },
          root: { sx: { alignItems: 'center' } },
        }}
      >
        <Stack
          sx={{
            width: '100%',
            maxWidth: MAX_CONTENT_WIDTH,
            px: 4,
            py: 3,
            gap: 3,
          }}
        >
          <Stack sx={{ gap: 0.5 }}>
            <Typography
              variant="globalM"
              fontWeight="fontWeightSemiBold"
            >
              {t('admin.basic_info.title')}
            </Typography>
            <Typography
              variant="globalS"
              color="text.secondary"
            >
              {t('admin.basic_info.description')}
            </Typography>
          </Stack>

          <CardContainer fullWidth>
            <Stack sx={{ gap: 3, p: 3 }}>
              <FormInputClassic
                name="name"
                inputProps={{
                  label: t('admin.basic_info.name_label'),
                  placeholder: t('admin.basic_info.name_placeholder'),
                }}
                rules={{ required: t('admin.basic_info.name_required') }}
              />
            </Stack>
          </CardContainer>
        </Stack>
      </StepLayout>
    </FormProvider>
  );
};

export default BasicInfoStep;