import { clsx } from 'clsx';

import Button from '../button';
import {
  AriaLabelProperty,
  CommonProps,
  Priority,
  PriorityPrimary,
  PrioritySecondary,
  PriorityTertiary,
} from '../common';
import Option from '../common/Option';
import { ButtonPriority } from '../button/Button.types';

type ActionOptionPriority =
  | PriorityPrimary
  | PrioritySecondary
  | PriorityTertiary
  | 'secondary-send';

export type ActionOptionProps = {
  complex?: boolean;
  content?: React.ReactNode;
  disabled?: boolean;
  media?: React.ReactNode;
  showMediaAtAllSizes?: boolean;
  onClick: () => void;
  title: React.ReactNode;
  additionalContent?: React.ReactNode;
  action: React.ReactNode;
  priority?: ActionOptionPriority;
  showMediaCircle?: boolean;
  isContainerAligned?: boolean;
  as?: React.ElementType;
} & CommonProps &
  AriaLabelProperty;

/**
 * @deprecated Use `<ListItem />` instead (run codemod to migrate: **`npx @wise/wds-codemods@latest list-item`**).
 * @deprecatedSince 46.104.0
 * @see [Source](../listItem/ListItem.tsx)
 * @see [Storybook](https://storybook.wise.design/?path=/docs/content-listitem--docs)
 * @see [Design docs](https://wise.design/components/list-item)
 * @see [Release notes](https://transferwise.atlassian.net/wiki/spaces/DS/pages/3647251055/List+Item+release+notes)
 */
const ActionOption = ({
  action,
  priority = Priority.PRIMARY,
  disabled,
  onClick,
  media,
  title,
  content,
  additionalContent,
  complex,
  className,
  showMediaAtAllSizes,
  showMediaCircle,
  isContainerAligned,
  as,
  'aria-label': ariaLabel,
}: ActionOptionProps) => {
  const sharedProps = {
    media,
    title,
    content,
    complex,
    disabled,
    showMediaAtAllSizes,
    showMediaCircle,
    className: clsx('tw-action-option', className),
    isContainerAligned,
    additionalContent,
    as,
  };

  const getAriaLabel = (): string | undefined => {
    if (ariaLabel) {
      return ariaLabel;
    }

    const generatedLabels: string[] = [];

    if (typeof title === 'string') {
      generatedLabels.push(title);
    }

    if (typeof action === 'string') {
      generatedLabels.push(action);
    }

    return generatedLabels.join(', ') || undefined;
  };

  const mapPriority = (priority: ActionOptionPriority): ButtonPriority => {
    switch (priority) {
      case 'primary':
        return 'primary';
      case 'secondary':
        return 'secondary-neutral';
      case 'tertiary':
        return 'tertiary';
      case 'secondary-send':
        return 'secondary';
      default:
        return 'primary';
    }
  };

  return (
    <Option
      {...sharedProps}
      button={
        <Button
          v2
          size="sm"
          priority={mapPriority(priority)}
          disabled={disabled}
          aria-label={getAriaLabel()}
          onClick={onClick}
        >
          {action}
        </Button>
      }
    />
  );
};

export default ActionOption;