import React from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { Box, Button } from '@wix/design-system';
import { useCardActions } from './useCardActions';
import { KanbanCardProps } from './Card';
import { MessageActionModal } from '../ActionModal';
import { DisabledTooltip } from '../DisabledTooltip';
import { TableActionCellPrimaryAction } from '../ActionCell';

type CardActionsProps<T, S, F extends FiltersMap> = Pick<
  KanbanCardProps<T, S, F>,
  | 'actionCell'
  | 'originalItem'
  | 'itemIndex'
  | 'itemActionsState'
  | 'stageKey'
  | 'item'
  | 'state'
>;

function _CardActions<T, S, F extends FiltersMap>({
  actionCell,
  originalItem,
  itemIndex,
  itemActionsState,
  stageKey,
  item,
  state,
}: CardActionsProps<T, S, F>) {
  const { secondaryActions, primaryActionProps: _primaryActionProps } =
    useCardActions({
      actionCell,
      originalItem,
      itemIndex,
      itemActionsState,
      stageKey,
      cardKey: item.key,
      state,
    });
  const primaryActionProps =
    _primaryActionProps as TableActionCellPrimaryAction;

  return (
    <>
      {/* Render modals from ItemActionsState */}
      {itemActionsState.confirmModal.value && (
        <MessageActionModal
          state={itemActionsState.confirmModal}
          {...itemActionsState.confirmModal.value}
        />
      )}
      <Box gap="9px">
        {secondaryActions}
        {primaryActionProps && (
          <DisabledTooltip
            content={primaryActionProps.disabledMessage}
            disabled={!primaryActionProps.disabled}
            dataHook={`kanban-card-primary-action-tooltip-${stageKey}-${item.key}`}
          >
            <Button
              style={{ zIndex: 50 }}
              size="tiny"
              priority="secondary"
              onClick={(e) => {
                e.stopPropagation();
                primaryActionProps.onClick();
              }}
              disabled={primaryActionProps.disabled}
              prefixIcon={primaryActionProps.prefixIcon}
              dataHook={`kanban-card-primary-action-${stageKey}-${item.key}`}
            >
              {primaryActionProps.text}
            </Button>
          </DisabledTooltip>
        )}
      </Box>
    </>
  );
}

export const CardActions = observer(_CardActions);