import { createElement } from 'react';
import {
  ActionCellProps,
  SecondaryActionAction,
  SecondaryAction,
} from '../ActionCell';
import { KeyedItem } from '@wix/bex-core';
import { FiltersMap } from '../../exports/core';
import { ExtensionMenuItemsState } from '../../state';
import { action } from 'mobx';
import { TableActionCellSecondaryDivider } from '@wix/design-system';
import type { KanbanState } from '../../state/KanbanState';
import { KanbanCtaType } from '../../state/KanbanState/KanbanStateBIReporter';

const calcCtaCount = (actionCellProps: ActionCellProps) => {
  const { secondaryActions } = actionCellProps;
  return secondaryActions?.length || 0;
};

type SecondaryActionDivider = Omit<
  TableActionCellSecondaryDivider,
  'divider'
> & {
  divider: true;
};

export type KanbanSecondaryActionOrDivider =
  | SecondaryActionAction
  | SecondaryActionDivider;

export interface CreateKanbanActionCellParams<T, S, F extends FiltersMap> {
  state: KanbanState<T, S, F>;
  actionCellProps: ActionCellProps;
  keyedItem: KeyedItem<T>;
  extensionMenuItems?: ExtensionMenuItemsState;
  stageId: string;
}

export const createKanbanSecondaryActionCellPropsWithBI = <
  T,
  S,
  F extends FiltersMap,
>({
  state,
  actionCellProps,
  keyedItem,
  extensionMenuItems,
  stageId,
}: CreateKanbanActionCellParams<T, S, F>): KanbanSecondaryActionOrDivider[] => {
  const { secondaryActions = [] } = actionCellProps;

  const stageIndex = state.getStageIndexByKey(stageId);
  const stageName = state.getStageNameByKey(stageId);

  const moreSecondaryItems: SecondaryAction[] =
    extensionMenuItems?.menuItems.map((menuItem) => {
      return {
        ...menuItem,
        icon: menuItem.prefixIcon || createElement('div'),
      };
    }) || [];

  const allActions = [
    ...secondaryActions,
    ...moreSecondaryItems,
  ] as KanbanSecondaryActionOrDivider[];

  return (
    allActions.map((_action, index) => {
      const biIndex = index;

      if (_action.divider) {
        return _action;
      }

      const onClick = action(() => {
        state.kanbanStateBIReporter.reportCardCTAClicked({
          itemId: keyedItem.id,
          itemIndex: keyedItem.index,
          ctaName: _action.biName || _action.text || 'Secondary Action',
          ctaType: KanbanCtaType.MORE_ACTIONS_OPTION,
          stageIndex,
          stageId,
          stageName,
          ctaIndex: biIndex,
          numCtas: calcCtaCount(actionCellProps),
        });
        _action.onClick?.();
      });

      const { biName: _biName, ...secondaryActionProperties } = _action;
      return { ...secondaryActionProperties, onClick };
    }) || []
  );
};

export const createKanbanPrimaryActionCellPropsWithBI = <
  T,
  S,
  F extends FiltersMap,
>({
  state,
  actionCellProps,
  keyedItem,
  stageId,
}: CreateKanbanActionCellParams<T, S, F>) => {
  const { primaryAction } = actionCellProps;

  const stageIndex = state.getStageIndexByKey(stageId);
  const stageName = state.getStageNameByKey(stageId);

  if (primaryAction && !Array.isArray(primaryAction)) {
    const onClick = action(() => {
      state.kanbanStateBIReporter.reportCardCTAClicked({
        itemId: keyedItem.id,
        itemIndex: keyedItem.index,
        ctaName:
          primaryAction?.biName || primaryAction?.text || 'Primary Action',
        ctaType: KanbanCtaType.PRIMARY_BUTTON,
        stageId,
        stageIndex,
        stageName,
      });
      primaryAction?.onClick();
    });

    const { biName, ...primaryActionProperties } = primaryAction;
    return { ...primaryActionProperties, onClick };
  }
  return primaryAction;
};

export const reportOnKanbanPopoverMenuShow = <T, S, F extends FiltersMap>({
  state,
  keyedItem,
  stageId,
}: {
  state: KanbanState<T, S, F>;
  keyedItem: KeyedItem<T>;
  stageId: string;
}) => {
  const stageIndex = state.getStageIndexByKey(stageId);
  const stageName = state.getStageNameByKey(stageId);

  state.kanbanStateBIReporter.reportCardCTAClicked({
    itemId: keyedItem.id,
    itemIndex: keyedItem.index,
    ctaName: 'More Actions',
    ctaType: KanbanCtaType.SECONDARY_DROPDOWN,
    stageId,
    stageIndex,
    stageName,
  });
};