import { useModal } from '@material-hu/hooks/useModal';
import { IconDots } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';

import MenuList from '@material-hu/components/composed-components/MenuList';
import { type MenuListProps } from '@material-hu/components/composed-components/MenuList/types';
import Dialog from '@material-hu/components/design-system/Dialog';

import { useAuth } from 'src/contexts/JWTContext';
import usePermissions from 'src/hooks/usePermissions';
import { type Acknowledgement } from 'src/pages/dashboard/acknowledgements/types';
import { insertIf } from 'src/utils/arrays';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { UserPermissions } from 'src/utils/permissions';

import { useCreateAcknowledgementDrawer } from '../hooks/useAcknowledgementDrawer';
import { useDeleteAcknowledgement } from '../hooks/useDeleteAcknowledgement';

type AcknowledgementMenuActionsProps = {
  acknowledgement: Acknowledgement;
};

const AcknowledgementMenuActions = ({
  acknowledgement,
}: AcknowledgementMenuActionsProps) => {
  const { user } = useAuth();
  const { t } = useLokaliseTranslation('acknowledgements');

  const { id, acknowledger } = acknowledgement;

  const isAcknowledger = acknowledger.id === user?.id;
  const { hasAll: canCreateAcknowledgements } = usePermissions([
    UserPermissions.CREATE_ACKNOWLEDGEMENTS,
  ]);
  const { hasAll: canManageAcknowledgements } = usePermissions([
    UserPermissions.MANAGE_ACKNOWLEDGEMENTS,
  ]);

  const deleteAcknowledgement = useDeleteAcknowledgement();

  const handleDeleteAcknowledgement = () => {
    deleteAcknowledgement.mutate(acknowledgement, {
      onSettled: closeDeleteModal,
    });
  };

  const {
    modal: deleteModal,
    showModal: showDeleteModal,
    closeModal: closeDeleteModal,
  } = useModal(
    () => (
      <Dialog
        title={t('delete_acknowledgement_message')}
        textBody={t('delete_recognition_text')}
        onClose={closeDeleteModal}
        primaryButtonProps={{
          children: t('delete_recognition'),
          onClick: handleDeleteAcknowledgement,
          loading: deleteAcknowledgement.isLoading,
        }}
        secondaryButtonProps={{
          children: t('general:cancel'),
          disabled: deleteAcknowledgement.isLoading,
          onClick: closeDeleteModal,
        }}
      />
    ),
    {
      onClose: () => closeDeleteModal(),
    },
  );

  const { openCreateAcknowledgementDrawer } = useCreateAcknowledgementDrawer();

  const isCreator = isAcknowledger && canCreateAcknowledgements;

  const menuOptions: MenuListProps['options'] = [
    ...insertIf(isCreator, {
      title: t('edit_ack'),
      onClick: () => openCreateAcknowledgementDrawer(id),
    }),
    ...insertIf(isCreator || canManageAcknowledgements, {
      title: t('general:eliminate'),
      onClick: showDeleteModal,
    }),
  ];

  if (!menuOptions.length) return null;

  return (
    <>
      {deleteModal}
      <MenuList
        options={menuOptions}
        customButton={
          <IconButton>
            <IconDots />
          </IconButton>
        }
      />
    </>
  );
};

export default AcknowledgementMenuActions;