import * as React from 'react';
import styles from '@patternfly/react-styles/css/components/Select/select';
import checkStyles from '@patternfly/react-styles/css/components/Check/check';
import { css } from '@patternfly/react-styles';
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
import { SelectConsumer, SelectVariant } from './selectConstants';
import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
import { getUniqueId } from '../../../helpers/util';
import { KeyTypes } from '../../../helpers/constants';

export interface SelectOptionObject {
  /** Function returns a string to represent the select option object */
  toString(): string;
  /** Function returns a true if the passed in select option is equal to this select option object, false otherwise */
  compareTo?(selectOption: any): boolean;
}
export interface SelectOptionProps extends Omit<React.HTMLProps<HTMLElement>, 'type' | 'ref' | 'value'> {
  /** Optional alternate display for the option */
  children?: React.ReactNode;
  /** Additional classes added to the Select Option */
  className?: string;
  /** Description of the item for single and both typeahead select variants */
  description?: React.ReactNode;
  /** Number of items matching the option */
  itemCount?: number;
  /** @hide Internal index of the option */
  index?: number;
  /** Indicates which component will be used as select item */
  component?: React.ReactNode;
  /** The value for the option, can be a string or select option object */
  value: string | SelectOptionObject;
  /** Flag indicating if the option is disabled */
  isDisabled?: boolean;
  /** Flag indicating if the option acts as a placeholder */
  isPlaceholder?: boolean;
  /** Flag indicating if the option acts as a "no results" indicator */
  isNoResultsOption?: boolean;
  /** @hide Internal flag indicating if the option is selected */
  isSelected?: boolean;
  /** @hide Internal flag indicating if the option is checked */
  isChecked?: boolean;
  /** Flag forcing the focused state */
  isFocused?: boolean;
  /** @hide Internal callback for ref tracking */
  sendRef?: (
    ref: React.ReactNode,
    favoriteRef: React.ReactNode,
    optionContainerRef: React.ReactNode,
    index: number
  ) => void;
  /** @hide Internal callback for keyboard navigation */
  keyHandler?: (index: number, innerIndex: number, position: string) => void;
  /** Optional callback for click event */
  onClick?: (event: React.MouseEvent | React.ChangeEvent) => void;
  /** Id of the checkbox input */
  inputId?: string;
  /** @hide Internal Flag indicating if the option is favorited */
  isFavorite?: boolean;
  /** Aria label text for favoritable button when favorited */
  ariaIsFavoriteLabel?: string;
  /** Aria label text for favoritable button when not favorited */
  ariaIsNotFavoriteLabel?: string;
  /** ID of the item. Required for tracking favorites */
  id?: string;
  /** @hide Internal flag to apply the load styling to view more option */
  isLoad?: boolean;
  /** @hide Internal flag to apply the loading styling to spinner */
  isLoading?: boolean;
  /** @hide Internal callback for the setting the index of the next item to focus after view more is clicked */
  setViewMoreNextIndex?: () => void;
  /** @hide Flag indicating this is the last option when there is a footer */
  isLastOptionBeforeFooter?: (index: number) => boolean;
  /** @hide Flag indicating that the the option loading variant is in a grouped select */
  isGrouped?: boolean;
}

class SelectOption extends React.Component<SelectOptionProps> {
  static displayName = 'SelectOption';
  private ref = React.createRef<any>();
  private liRef = React.createRef<any>();
  private favoriteRef = React.createRef<any>();
  static defaultProps: SelectOptionProps = {
    className: '',
    value: '',
    index: 0,
    isDisabled: false,
    isPlaceholder: false,
    isSelected: false,
    isChecked: false,
    isNoResultsOption: false,
    component: 'button',
    onClick: () => {},
    sendRef: () => {},
    keyHandler: () => {},
    inputId: '',
    isFavorite: null,
    isLoad: false,
    isLoading: false,
    setViewMoreNextIndex: () => {},
    isLastOptionBeforeFooter: () => false
  };

  componentDidMount() {
    this.props.sendRef(
      this.props.isDisabled ? null : this.ref.current,
      this.props.isDisabled ? null : this.favoriteRef.current,
      this.props.isDisabled ? null : this.liRef.current,
      this.props.index
    );
  }

  componentDidUpdate() {
    this.props.sendRef(
      this.props.isDisabled ? null : this.ref.current,
      this.props.isDisabled ? null : this.favoriteRef.current,
      this.props.isDisabled ? null : this.liRef.current,
      this.props.index
    );
  }

  onKeyDown = (event: React.KeyboardEvent, innerIndex: number, onEnter?: any, isCheckbox?: boolean) => {
    const { index, keyHandler, isLastOptionBeforeFooter } = this.props;
    let isLastItemBeforeFooter = false;
    if (isLastOptionBeforeFooter !== undefined) {
      isLastItemBeforeFooter = isLastOptionBeforeFooter(index);
    }

    if (event.key === KeyTypes.Tab) {
      // More modal-like experience for checkboxes
      if (isCheckbox && !isLastItemBeforeFooter) {
        if (event.shiftKey) {
          keyHandler(index, innerIndex, 'up');
        } else {
          keyHandler(index, innerIndex, 'down');
        }
        event.stopPropagation();
      } else {
        if (event.shiftKey) {
          keyHandler(index, innerIndex, 'up');
        } else {
          keyHandler(index, innerIndex, 'tab');
        }
      }
    }
    event.preventDefault();
    if (event.key === KeyTypes.ArrowUp) {
      keyHandler(index, innerIndex, 'up');
    } else if (event.key === KeyTypes.ArrowDown) {
      keyHandler(index, innerIndex, 'down');
    } else if (event.key === KeyTypes.ArrowLeft) {
      keyHandler(index, innerIndex, 'left');
    } else if (event.key === KeyTypes.ArrowRight) {
      keyHandler(index, innerIndex, 'right');
    } else if (event.key === KeyTypes.Enter) {
      if (onEnter !== undefined) {
        onEnter();
      } else {
        this.ref.current.click();
      }
    }
  };

  render() {
    /* eslint-disable @typescript-eslint/no-unused-vars */
    const {
      children,
      className,
      id,
      description,
      itemCount,
      value,
      onClick,
      isDisabled,
      isPlaceholder,
      isNoResultsOption,
      isSelected,
      isChecked,
      isFocused,
      sendRef,
      keyHandler,
      index,
      component,
      inputId,
      isFavorite,
      ariaIsFavoriteLabel = 'starred',
      ariaIsNotFavoriteLabel = 'not starred',
      isLoad,
      isLoading,
      setViewMoreNextIndex,
      // eslint-disable-next-line no-console
      isLastOptionBeforeFooter,
      isGrouped = false,
      ...props
    } = this.props;
    /* eslint-enable @typescript-eslint/no-unused-vars */
    const Component = component as any;

    if (!id && isFavorite !== null) {
      // eslint-disable-next-line no-console
      console.error('Please provide an id to use the favorites feature.');
    }

    const generatedId = id || getUniqueId('select-option');
    const favoriteButton = (onFavorite: any) => (
      <button
        className={css(styles.selectMenuItem, styles.modifiers.action, styles.modifiers.favoriteAction)}
        aria-label={isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel}
        onClick={() => {
          onFavorite(generatedId.replace('favorite-', ''), isFavorite);
        }}
        onKeyDown={(event) => {
          this.onKeyDown(event, 1, () => onFavorite(generatedId.replace('favorite-', ''), isFavorite));
        }}
        ref={this.favoriteRef}
      >
        <span className={css(styles.selectMenuItemActionIcon)}>
          <StarIcon />
        </span>
      </button>
    );

    const itemDisplay = itemCount ? (
      <span className={css(styles.selectMenuItemRow)}>
        <span className={css(styles.selectMenuItemText)}>
          {children || (value && value.toString && value.toString())}
        </span>
        <span className={css(styles.selectMenuItemCount)}>{itemCount}</span>
      </span>
    ) : (
      children