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

import Drawer from '@material-hu/components/design-system/Drawer';
import { useDialogLayer } from '@material-hu/components/layers/Dialogs';
import { useDrawerLayer } from '@material-hu/components/layers/Drawers';

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

import { useEditAudienceForm } from '../../hooks/useEditAudienceForm';
import { KnowledgeBaseAudienceType, type SegmentationTag } from '../../types';
import EditAudienceConfirmDialog from '../EditAudienceConfirmDialog';
import KnowledgeBaseAudienceAlert from '../KnowledgeBaseAudienceAlert';

import EditAudienceDrawerBody from './EditAudienceDrawerBody';

const CONFIRM_DIALOG_ID = 'knowledge-base-edit-audience-confirm-dialog';

type EditAudienceDrawerProps = {
  items: string[];
  defaultAudience?: SegmentationTag[];
  onSuccess?: () => void;
};

const EditAudienceDrawer = ({
  items,
  defaultAudience,
  onSuccess,
}: EditAudienceDrawerProps) => {
  const { t } = useLokaliseTranslation('agents');
  const { closeDrawer } = useDrawerLayer();
  const { openDialog, closeDialog } = useDialogLayer();

  const isBulk = items.length > 1;

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

  const { submit, isLoading, form, cleanForm } = useEditAudienceForm({
    items,
    defaultAudience,
    groups: segmentationsQuery.data,
  });

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

  const handleSave = form.handleSubmit(values => {
    if (!values.audienceType) return;

    const onSuccessFn = () => {
      onSuccess?.();
      closeDrawer();
    };

    if (isBulk) {
      openDialog(
        {
          content: (
            <EditAudienceConfirmDialog
              itemCount={items.length}
              audienceType={audienceType}
              segmentation={segmentation}
              onClose={() => closeDialog(CONFIRM_DIALOG_ID)}
              onConfirm={() => {
                closeDialog(CONFIRM_DIALOG_ID);
                submit({ values, onSuccess: onSuccessFn });
              }}
            />
          ),
        },
        CONFIRM_DIALOG_ID,
      );
    } else {
      submit({ values, onSuccess: onSuccessFn });
    }
  });

  const handleCancel = () => {
    form.reset();
    closeDrawer();
  };

  const isDisabled =
    !audienceType ||
    (audienceType === KnowledgeBaseAudienceType.SEGMENTED &&
      !Object.values(segmentation).some(ids => ids.size > 0));

  return (
    <FormProvider {...form}>
      <Drawer.Header
        title={t('knowledge_base.edit_audience_drawer.title')}
        onClose={handleCancel}
      />

      <EditAudienceDrawerBody segmentationsQuery={segmentationsQuery} />

      {audienceType && (
        <Drawer.Footer>
          <KnowledgeBaseAudienceAlert
            audienceType={audienceType}
            segmentation={segmentation}
          />
        </Drawer.Footer>
      )}

      <Drawer.Actions
        primaryButtonProps={{
          children: isBulk ? t('general:continue') : t('general:save_changes'),
          onClick: handleSave,
          fullWidth: true,
          disabled: isDisabled,
          loading: isLoading,
        }}
        secondaryButtonProps={{
          children: t('general:clean'),
          disabled: !audienceType,
          onClick: cleanForm,
          fullWidth: true,
        }}
      />
    </FormProvider>
  );
};

export default EditAudienceDrawer;