import type { ForwardedRef } from 'react';
import React, { useId, useMemo } from 'react';
import { type AriaButtonProps } from 'react-aria';
import { Button } from 'react-aria-components';
import classNames from 'classnames';

import type { SafeOmit } from '@shoptet/utils';
import { forwardRef } from '@shoptet/utils';

import type { SafeExtract, Size } from '../../../types';
import { Text } from '../../Typography/Text/Text';

/** @inheritdoc */
export interface SingleSelectTriggerProps<T extends object = object> extends SafeOmit<AriaButtonProps, 'value'> {
  /**
   * Sets the accessibility label for the trigger button.
   */
  label: string;
  /**
   * Placeholder text displayed when no option is selected.
   */
  placeholder?: string;
  /**
   * The width of the trigger button.
   * @default 'md'
   */
  width?: SafeExtract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'full'>;
  /**
   * Display error state.
   */
  error?: boolean;
  /**
   * Display warning state.
   */
  warning?: boolean;
  /**
   * Icon type for the trigger.
   */
  icon?: false | 'search' | 'picker';
  /**
   * Currently selected value.
   */
  value?: T | null;
  /**
   * Function to get the label for a given option.
   */
  getOptionLabel(option: T): string;
  /**
   * Current search query (for filtered selects).
   */
  searchQuery?: string | null;
  /**
   * Custom render function for the selected value.
   */
  renderValue?(value: T | null, labelId: string): React.ReactNode;
}

export const SingleSelectTrigger = forwardRef(function SingleSelectTrigger<T extends object = object>(
  {
    icon,
    value: valueProp,
    searchQuery,
    renderValue,
    getOptionLabel,
    placeholder,
    width = 'md',
    error,
    warning,
    label,
    isDisabled,
    ...props
  }: SingleSelectTriggerProps<T>,
  forwardedRef: ForwardedRef<HTMLButtonElement>
) {
  const optionLabel = valueProp && getOptionLabel(valueProp);

  const triggerClassName = classNames('singleSelectField__inputTrigger', 'searchField', width, {
    'singleSelectField__inputTrigger--picker': icon === 'picker',
    'searchField--icon': icon === 'search',
    'error-field': error,
    'warning-field': warning,
  });

  const generatedId = useId();
  const labelledById = `SingleSelectTrigger${generatedId}`;
  const buttonId = props.id ?? `SingleSelectTriggerButton${generatedId}`;

  // A single composed aria-label ("<value>, <label>") instead of aria-label + a self-referencing
  // aria-labelledby: WebKit collapses the accessible name to the aria-label alone and drops the
  // labelledby targets, so the selected value would go unread by VoiceOver.
  const selectedText = valueProp ? optionLabel || searchQuery || '' : '';
  const accessibleName = selectedText ? `${selectedText}, ${label}` : label;

  const valueElement = useMemo(
    () =>
      valueProp ? (
        typeof renderValue === 'function' ? (
          renderValue(valueProp, labelledById)
        ) : (
          <Text truncate id={labelledById}>
            {optionLabel ?? searchQuery}
          </Text>
        )
      ) : null,
    [labelledById, optionLabel, renderValue, valueProp, searchQuery]
  );

  const placeholderElement = useMemo(
    () =>
      placeholder ? (
        <span aria-hidden id={labelledById} className='searchField__placeholder'>
          {placeholder}
        </span>
      ) : null,
    [labelledById, placeholder]
  );

  return (
    <Button
      ref={forwardedRef}
      isDisabled={isDisabled}
      className={triggerClassName}
      aria-label={accessibleName}
      {...props}
      id={buttonId}
    >
      {valueElement ?? placeholderElement}
    </Button>
  );
});