import React, { useMemo } from 'react';
import {
  IconButton,
  PopoverMenu,
  PopoverMenuItemProps,
} from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { MoreSmall } from '@wix/wix-ui-icons-common';
import { getDefaultActionCellProps } from '../CollectionItemActions/getDefaultActionCellProps';
import { SecondaryActionAction } from '../ActionCell';
import { FiltersMap } from '../../exports/core';
import { KanbanBaseProps } from '.';
import { ItemActionsState } from '../../state';
import { KanbanState } from '../../state/KanbanState';
import { MessageActionModal } from '../ActionModal';

interface StageActionsProps<T, S, F extends FiltersMap> {
  state: KanbanState<T, S, F>;
  stageKey: string;
  stageActionCell: KanbanBaseProps<T, S, F>['stageActionCell'];
}

function _StageActions<T, S, F extends FiltersMap>({
  state,
  stageKey,
  stageActionCell,
}: StageActionsProps<T, S, F>) {
  const keyedItem = state.stagesCollectionState.getKeyedItem(stageKey);

  const stageActionsState = useMemo(() => {
    if (!keyedItem) {
      return null;
    }

    return new ItemActionsState({
      keyedItem,
      fade: 'static',
      collection: state.stagesCollectionState,
      reportBi: state.toolbar.reportBi,
    });
  }, [keyedItem, state.stagesCollectionState, state.toolbar.reportBi]);

  if (!keyedItem || !stageActionsState) {
    return null;
  }

  const resolvedActionCell =
    typeof stageActionCell === 'function'
      ? stageActionCell(
          keyedItem.item,
          keyedItem.indexWithinPage,
          stageActionsState.actionCellAPI,
        )
      : stageActionCell;

  const secondaryActions = resolvedActionCell?.secondaryActions;

  if (!secondaryActions?.length) {
    return null;
  }

  return (
    <>
      {stageActionsState.confirmModal.value && (
        <MessageActionModal
          state={stageActionsState.confirmModal}
          {...stageActionsState.confirmModal.value}
        />
      )}
      <PopoverMenu
        {...getDefaultActionCellProps()}
        textSize="small"
        minWidth="223px"
        dataHook={`kanban-stage-more-actions-${stageKey}`}
        triggerElement={({ toggle }) => {
          return (
            <IconButton
              skin="dark"
              priority="tertiary"
              size="small"
              dataHook={`kanban-stage-more-actions-trigger-${stageKey}`}
              onClick={(e) => {
                e.stopPropagation();
                toggle();
              }}
            >
              <MoreSmall />
            </IconButton>
          );
        }}
      >
        {secondaryActions.map((secondaryAction, index) => {
          if (secondaryAction.divider) {
            return <PopoverMenu.Divider key={index} />;
          }
          const action = secondaryAction as SecondaryActionAction;
          const { icon: prefixIcon, skin, ...rest } = action;

          return (
            <PopoverMenu.MenuItem
              key={index}
              dataHook={`kanban-stage-more-actions-item-${stageKey}`}
              skin={skin as PopoverMenuItemProps['skin']}
              prefixIcon={prefixIcon}
              {...rest}
            />
          );
        })}
      </PopoverMenu>
    </>
  );
}

export const StageActions = observer(_StageActions);