// @flow strict

import * as React from 'react';

import type {ButtonProps} from '../Button';
import {Button} from '../Button';
import type {AnchorType} from '../ButtonDropdown';
import {ButtonDropdown} from '../ButtonDropdown';
import type {MenuOption, MenuProps} from '../Menu';

import css from './OptionButton.module.css';


export type OptionButtonProps = {
  ...ButtonProps,
  menu?: MenuProps,
  anchorPosition?: AnchorType,
  onOptionSelect?: (option: MenuOption) => mixed,
  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
  onMenuOpen?: () => mixed,
  onMenuClose?: () => mixed,
  ...
};

export const OptionButton: React$AbstractComponent<
  OptionButtonProps,
  HTMLDivElement,
> = React.forwardRef<OptionButtonProps, HTMLDivElement>(
  (
    {
      children,
      iconLeftName,
      iconLeftType,
      type,
      isFluid,
      disabled,
      size,
      isLoading,
      menu,
      anchorPosition,
      onOptionSelect,
      onButtonClick,
      onMenuOpen,
      onMenuClose,
      ariaLabel,
      actionType,
    }: OptionButtonProps,
    ref,
  ): React.Node => {
    const [iconName, setIconName] = React.useState('chevron-down');

    return (
      <div className={css.container} ref={ref}>
        <Button
          iconLeftName={iconLeftName}
          iconLeftType={iconLeftType}
          onClick={onButtonClick}
          size={size}
          type={type}
          classNames={{wrapper: css.leftButton}}
          disabled={disabled}
          isFluid={isFluid}
          ariaLabel={ariaLabel}
          actionType={actionType}
          isLoading={isLoading}
        >
          {children}
        </Button>
        <ButtonDropdown
          anchorPosition={anchorPosition}
          ariaLabel={ariaLabel}
          iconLeftName={iconName}
          classNames={{
            buttonWrapper: css.rightButton,
            dropdownContainer: css.dropDownContainer,
          }}
          type={type}
          disabled={disabled}
          menu={menu}
          onMenuClose={() => {
            setIconName('chevron-down');
            onMenuOpen && onMenuOpen();
          }}
          onMenuOpen={() => {
            setIconName('chevron-up');
            onMenuClose && onMenuClose();
          }}
          onOptionSelect={onOptionSelect}
          size={size}
        />
      </div>
    );
  },
);