import React from 'react';

import { DropdownButton } from '../../DropdownButton/DropdownButton';

import type { ActionMenu, MassActionDropdownType } from './types';

const toDropdownOptions = <T,>(
  actions: ActionMenu<T>,
  selectedRows: T[],
  selectedAll: boolean
): React.JSX.Element[] => {
  if (actions.length === 0) {
    return [];
  }

  return actions.map(action => {
    if ('submenu' in action) {
      return (
        <DropdownButton key={action.label} label={action.label}>
          {toDropdownOptions(action.submenu, selectedRows, selectedAll)}
        </DropdownButton>
      );
    }

    return (
      <DropdownButton.Item
        key={action.label}
        label={action.label}
        href={typeof action.href === 'string' ? action.href : action.href?.(selectedRows, selectedAll)}
        target={action.target}
        onAction={() => action.onAction?.(selectedRows, selectedAll)}
      />
    );
  });
};

const isMassActionDropdowns = <T,>(
  actions: ActionMenu<T> | MassActionDropdownType<T>[]
): actions is MassActionDropdownType<T>[] => typeof actions[0] === 'object' && 'actions' in actions[0];

interface MassActionDropdownsProps<T> {
  actions: ActionMenu<T> | MassActionDropdownType<T>[];
  selectedRows: T[];
  label: string;
  selectedAll: boolean;
  actionsDisabled?: boolean;
}

export const MassActionDropdown = <T,>({
  actions,
  selectedAll,
  label,
  selectedRows,
  actionsDisabled,
  ...rest
}: MassActionDropdownsProps<T>) => {
  if (isMassActionDropdowns(actions)) {
    return actions.map((dropdown, index) => (
      <div key={index} className='massAction__item' {...rest}>
        <DropdownButton label={dropdown.label} trigger='click' variant='secondary' disabled={actionsDisabled}>
          {toDropdownOptions(dropdown.actions, selectedRows, selectedAll)}
        </DropdownButton>
      </div>
    ));
  }

  return (
    <div className='massAction__item' {...rest}>
      <DropdownButton label={label} trigger='click' variant='secondary' disabled={actionsDisabled}>
        {toDropdownOptions(actions, selectedRows, selectedAll)}
      </DropdownButton>
    </div>
  );
};