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

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

import Audience from '@material-hu/components/composed-components/audience/Audience';
import {
  type CriteriaEntry,
  CriteriaType,
} from '@material-hu/components/composed-components/audience/Audience/types';

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

import { MAX_CONTENT_WIDTH } from '../../constants';
import useProdeAudienceConfig from '../../hooks/useProdeAudienceConfig';

import StepLayout from './StepLayout';

type FormValues = { criterias: CriteriaEntry[] };

interface Props {
  criterias: CriteriaEntry[];
  onChangeCriterias: (criterias: CriteriaEntry[]) => void;
  onNext: () => void;
  onBack: () => void;
}

const ParticipantsStep = ({
  criterias,
  onChangeCriterias,
  onNext,
  onBack,
}: Props) => {
  const { t } = useLokaliseTranslation(['sportsPool', 'general']);

  const form = useForm<FormValues>({
    defaultValues: { criterias },
  });

  const watchedCriterias =
    useWatch({ control: form.control, name: 'criterias' }) ?? [];

  const audienceConfig = useProdeAudienceConfig(watchedCriterias);

  const handleSubmit = ({ criterias: c }: FormValues) => {
    onChangeCriterias(c);
    onNext();
  };

  return (
    <FormProvider {...form}>
      <StepLayout
        onNext={form.handleSubmit(handleSubmit)}
        onBack={onBack}
        slotProps={{ root: { sx: { alignItems: 'center' } } }}
      >
        <Stack
          sx={{
            width: '100%',
            alignItems: 'center',
            gap: 4,
            height: '100%',
            p: 4,
            overflowY: 'auto',
          }}
        >
          <Stack sx={{ width: '100%', maxWidth: MAX_CONTENT_WIDTH }}>
            <Audience
              title={t('sportsPool:admin.participants_step.title')}
              description={t('sportsPool:admin.participants_step.description')}
              showCriteriaInfo={false}
              availableCriteriaTypes={[
                CriteriaType.ALL,
                CriteriaType.SEGMENTATION,
                CriteriaType.INDIVIDUAL,
              ]}
              {...audienceConfig}
            />
          </Stack>
        </Stack>
      </StepLayout>
    </FormProvider>
  );
};

export default ParticipantsStep;