/**
 * TEAM: frontend_infra
 * @flow
 */

import * as React from "react";

import DeprecatedDropdownList, {
  type DropdownOption,
} from "./form/DeprecatedDropdownList";

import CustomDropdownButton from "./CustomDropdownButton";
import typeof Button from "./button/Button";
import typeof IconButton from "./button/IconButton";
import typeof ToggleButton from "./base_candidate/button/ToggleButton";

type Props = {|
  /** Makes the field unclickable and greyed out. */
  +disabled?: boolean,
  /** The button that triggers the dropdown menu. */
  +button: React.Element<Button | IconButton | ToggleButton>,
  /** The options to render in the dropdown list. */
  +options: $ReadOnlyArray<DropdownOption>,
  /** Aligns the right part of the menu with the right border of the button; by default, it is left-left. */
  +menuAlignRight?: boolean,
  +dataQaId?: string,
|};

export type DropdownButtonProps = Props;

/**
 * @short Use a button to launch a simple dropdown. The button's on click will be hijacked and replaced, so don't bother specifying one.
 * @brandStatus V2
 * @status Stable
 * @category Interaction
 *
 * Use this component for dropdowns with selectable options. For a dropdown with custom rendering check out the CustomDropdownButton component.
 * @extends React.Component */
class DropdownButton extends React.PureComponent<Props> {
  render(): React.Node {
    const {button, disabled, menuAlignRight, options, dataQaId} = this.props;

    return (
      <CustomDropdownButton
        button={button}
        disabled={disabled}
        isCustomContainer={true}
        menuAlignRight={menuAlignRight}
      >
        {setPopupVisible => (
          <DeprecatedDropdownList
            options={options}
            setPopupVisible={setPopupVisible}
            splitLayout={false}
            dataQaId={dataQaId}
          />
        )}
      </CustomDropdownButton>
    );
  }
}

export const _test = {
  DropdownButton,
};

export default DropdownButton;