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

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

import { type SegmentationGroupItemsSelectionProps } from '@material-hu/components/composed-components/audience/SegmentationGroupItemsSelection';
import Drawer from '@material-hu/components/design-system/Drawer';
import Title from '@material-hu/components/design-system/Title';

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

import {
  type KnowledgeBaseAudienceForm,
  type KnowledgeBaseAudienceSegmentation,
  KnowledgeBaseAudienceType,
} from '../../types';
import KnowledgeBaseAudienceSelector from '../KnowledgeBaseAudienceSelector';
import KnowledgeBaseSegmentation from '../KnowledgeBaseSegmentation';

type EditAudienceDrawerBodyProps = {
  segmentationsQuery: SegmentationGroupItemsSelectionProps['segmentationsQuery'];
};

const EditAudienceDrawerBody = ({
  segmentationsQuery,
}: EditAudienceDrawerBodyProps) => {
  const { t } = useLokaliseTranslation('agents');

  const form = useFormContext<KnowledgeBaseAudienceForm>();
  const [audienceType, segmentation] = useWatch({
    control: form.control,
    name: ['audienceType', 'segmentation'],
  });

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

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

  return (
    <Drawer.Body>
      <Stack sx={{ gap: 2 }}>
        <Title
          variant="M"
          title={t('knowledge_base.edit_audience_drawer.question')}
        />

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

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

export default EditAudienceDrawerBody;