import { useAtomValue, useSetAtom } from 'jotai';
import { and, equals, or } from 'ramda';
import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';

import { type ComponentColumnProps, IconButton } from '@centreon/ui';
import { useTheme } from '@mui/system';
import {
  openTicketContextAtom,
  resourcesToOpenTicketAtom
} from '../../../atom';
import {
  labelOpenTicketForHost,
  labelOpenTicketForService
} from '../../translatedLabels';
import { useOpenTicketStyles } from '../Columns.styles';
import IconCreateTicket from '../Icons/CreateTicket';
import TooltipContent from '../Tooltip/Tooltip';

const OpenTicket = ({ row }: ComponentColumnProps): ReactElement => {
  const { classes } = useOpenTicketStyles();
  const { t } = useTranslation();
  const { palette } = useTheme();

  const setResourcesToOpenTicket = useSetAtom(resourcesToOpenTicketAtom);
  const { enableHostTicketCreation, enableServiceTicketCreation } =
    useAtomValue(openTicketContextAtom);

  const { type } = row;
  const isHost = equals(type, 'host');
  const isService = equals(type, 'service');
  const displayCreateServiceTicketButton = and(
    enableServiceTicketCreation,
    isService
  );
  const displayCreateHostTicketButton = and(
    enableHostTicketCreation,
    or(isHost, isService)
  );

  const createServiceTicket = (): void => {
    setResourcesToOpenTicket([{ hostID: row?.parent.id, serviceID: row?.id }]);
  };

  const createHostTicket = (): void => {
    setResourcesToOpenTicket([{ hostID: row?.parent.id }]);
  };

  const ticket = row?.extra?.open_tickets?.tickets;
  const parentTicket = row?.parent?.extra?.open_tickets?.tickets;

  const hasTicket = !!ticket?.id;
  const didHostHasTicket = !!parentTicket?.id || (isHost && hasTicket);

  return (
    <div className={classes.actions}>
      {displayCreateServiceTicketButton && (
        <IconButton
          ariaLabel={t(labelOpenTicketForService)}
          color="primary"
          data-testid={labelOpenTicketForService}
          disabled={hasTicket}
          size="large"
          title={
            <TooltipContent
              {...ticket}
              hasNoTicket={hasTicket}
              isHost={false}
            />
          }
          tooltipClassName={hasTicket ? classes.tooltip : undefined}
          onClick={createServiceTicket}
        >
          <IconCreateTicket
            color={hasTicket ? palette.success.main : palette.primary.main}
            type="S"
          />
        </IconButton>
      )}
      {displayCreateHostTicketButton && (
        <IconButton
          ariaLabel={t(labelOpenTicketForHost)}
          color="primary"
          data-testid={labelOpenTicketForHost}
          disabled={didHostHasTicket}
          size="large"
          title={
            <TooltipContent
              {...(isHost ? ticket : parentTicket)}
              hasNoTicket={didHostHasTicket}
              isHost={true}
            />
          }
          tooltipClassName={didHostHasTicket ? classes.tooltip : undefined}
          onClick={createHostTicket}
        >
          <IconCreateTicket
            color={
              didHostHasTicket ? palette.success.main : palette.primary.main
            }
            type="H"
          />
        </IconButton>
      )}
    </div>
  );
};

export default OpenTicket;
