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

import Stack from '@material-hu/mui/Stack';
import { appearFromBottom } from '@material-hu/utils/animations';

import Title from '@material-hu/components/design-system/Title';

import useSegmentationGroups from 'src/hooks/queryHooks/useSegmentationGroups';
import { useLokaliseTranslation } from 'src/utils/i18n';

import KnowledgeBaseAudienceAlert from '../../../components/KnowledgeBaseAudienceAlert';
import KnowledgeBaseAudienceSelector from '../../../components/KnowledgeBaseAudienceSelector';
import KnowledgeBaseSegmentation from '../../../components/KnowledgeBaseSegmentation';
import {
  type KnowledgeBaseAudienceSegmentation,
  KnowledgeBaseAudienceType,
} from '../../../types';
import { UPLOAD_FIELDS } from '../../constants';
import { type UploadFormValues } from '../../types';

const UploadAudienceStep = () => {
  const { t } = useLokaliseTranslation('agents');
  const form = useFormContext<UploadFormValues>();

  const [audienceType, segmentation] = useWatch({
    control: form.control,
    name: [UPLOAD_FIELDS.audienceType, UPLOAD_FIELDS.segmentation],
  });

  const segmentationsQuery = useSegmentationGroups({ select: r => r.data });

  const handleSelectAudience = (value: KnowledgeBaseAudienceType) => {
    form.setValue(UPLOAD_FIELDS.audienceType, value);
    if (value === KnowledgeBaseAudienceType.ALL) {
      form.setValue(UPLOAD_FIELDS.segmentation, {});
    }
  };

  const handleChangeSegmentation = (
    selectedSegmentation: KnowledgeBaseAudienceSegmentation,
  ) => {
    form.setValue(UPLOAD_FIELDS.segmentation, selectedSegmentation);
  };

  const showCount = Boolean(audienceType);

  return (
    <Stack sx={{ gap: 2, animation: `${appearFromBottom} 0.3s ease-in-out` }}>
      <Title
        variant="M"
        title={t('upload.audience_title')}
      />

      <KnowledgeBaseAudienceSelector
        audienceType={audienceType}
        onSelectAudience={handleSelectAudience}
      />

      {showCount && (
        <KnowledgeBaseAudienceAlert
          audienceType={audienceType}
          segmentation={segmentation}
        />
      )}

      {audienceType === KnowledgeBaseAudienceType.SEGMENTED && (
        <KnowledgeBaseSegmentation
          segmentationsQuery={segmentationsQuery}
          segmentation={segmentation}
          onChange={handleChangeSegmentation}
        />
      )}
    </Stack>
  );
};

export default UploadAudienceStep;