import type { Ref } from 'react';
import React from 'react';
import type { PressEvent } from 'react-aria';
import { useObjectRef } from 'react-aria';
import { MenuItem } from 'react-aria-components';
import classNames from 'classnames';

import type { AnchorProps } from '../../Anchor/Anchor';
import type { ButtonProps } from '../../Button/Button';
import type { IconProps } from '../../Icon/Icon';
import { Icon } from '../../Icon/Icon';
import { Text } from '../../Typography/Text/Text';
import { useDropdownContext } from '../DropdownButtonContext';

export interface DropdownButtonListItemProps {
  label: string;
  description?: string;
  icon?: IconProps['icon'];

  href?: string;
  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];

  onAction?: ButtonProps['onClick'] | AnchorProps['onClick'];
  onPress?: (e: PressEvent) => void;

  variant?: 'default' | 'action';

  ref?: Ref<HTMLDivElement>;
}

const noop = () => undefined;
const alwaysTrue = () => true;

export const DropdownButtonListItem: React.FC<DropdownButtonListItemProps> = ({
  label,
  onAction,
  onPress,
  description,
  icon,
  href,
  target,
  variant = 'default',
  ref,
  ...rest
}) => {
  const { mobileView } = useDropdownContext();
  const itemRef = useObjectRef<HTMLDivElement>(ref);

  return (
    <MenuItem
      {...rest}
      ref={itemRef}
      onPress={onPress}
      onAction={() => {
        // Create a synthetic event-like object to mimic a real event (for consistency with onClick handlers)
        if (itemRef.current) {
          // TODO: Expand the synthetic event with more props if needed and remove this workaround if
          // react-aria-components starts to support onAction with a real event
          const syntheticEvent: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement> = {
            currentTarget: itemRef.current,
            target: itemRef.current,
            bubbles: false,
            cancelable: false,
            defaultPrevented: true,
            isTrusted: false,
            preventDefault: noop,
            isDefaultPrevented: alwaysTrue,
          } as unknown as React.MouseEvent<HTMLButtonElement & HTMLAnchorElement>;

          onAction?.(syntheticEvent);
        }
      }}
      className={classNames('dropdownButton__listItem', {
        'dropdownButton__listItem--mobileView': mobileView,
        'dropdownButton__listItem--action': variant === 'action',
      })}
      href={href}
      target={target}
    >
      {meta => (
        <>
          <span
            className={classNames('dropdownButton__listItemLabel', {
              'dropdownButton__listItemLabel--mobileView': mobileView,
              'dropdownButton__listItemLabel--action': variant === 'action',
            })}
          >
            {icon && <Icon icon={icon} size='sm' />}
            <Text appearance='md'>{label}</Text>
            {description && <Text appearance='md'>({description})</Text>}
          </span>
          {meta.hasSubmenu && (
            <span
              className={classNames('dropdownButton__listItemSubmenuIndicator', {
                'dropdownButton__listItemSubmenuIndicator--mobileView': mobileView,
              })}
            >
              <Icon icon='shp-arrow-right' size='md' variant='primary' />
            </span>
          )}
        </>
      )}
    </MenuItem>
  );
};