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 AudienceSkeleton from '@material-hu/components/composed-components/audience/AudienceSkeleton';
import HuDrawer from '@material-hu/components/design-system/Drawer';

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

import useProdeAudienceConfig from '../../hooks/useProdeAudienceConfig';

interface Props {
  open: boolean;
  onClose: () => void;
  onConfirm: (criterias: CriteriaEntry[]) => void;
  isSaving?: boolean;
  defaultCriterias?: CriteriaEntry[];
  isLoadingDefaults?: boolean;
}

type FormValues = { criterias: CriteriaEntry[] };

const AddParticipantsDrawer = ({
  open,
  onClose,
  onConfirm,
  isSaving,
  defaultCriterias,
  isLoadingDefaults,
}: Props) => {
  const { t } = useLokaliseTranslation(['sportsPool', 'general']);

  const form = useForm<FormValues>({
    values: { criterias: defaultCriterias ?? [] },
  });

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

  const audienceConfig = useProdeAudienceConfig(watchedCriterias);

  const handleClose = () => {
    form.reset({ criterias: defaultCriterias ?? [] });
    onClose();
  };

  const handleConfirm = ({ criterias }: FormValues) => {
    onConfirm(criterias);
  };

  return (
    <HuDrawer
      open={open}
      onClose={handleClose}
      title={t('admin.add_participants.title')}
      primaryButtonProps={{
        children: t('general:add'),
        onClick: form.handleSubmit(handleConfirm),
        disabled: watchedCriterias.length === 0 || isSaving,
        loading: isSaving,
        fullWidth: true,
      }}
      secondaryButtonProps={{
        children: t('general:cancel'),
        onClick: handleClose,
        fullWidth: true,
      }}
    >
      <Stack sx={{ gap: 2, flex: 1, overflow: 'hidden' }}>
        {isLoadingDefaults ? (
          <AudienceSkeleton />
        ) : (
          <FormProvider {...form}>
            <Audience
              title={t('admin.add_participants.description')}
              showCriteriaInfo={false}
              availableCriteriaTypes={[
                CriteriaType.ALL,
                CriteriaType.SEGMENTATION,
                CriteriaType.INDIVIDUAL,
              ]}
              {...audienceConfig}
            />
          </FormProvider>
        )}
      </Stack>
    </HuDrawer>
  );
};

export default AddParticipantsDrawer;