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

import * as React from "react";
import {type Size} from "../sizes";
import TextInput from "../TextInput";
import DropdownListExperimental from "./DropdownList_experimental";

export type SelectInputProps = {|
  +children: $PropertyType<
    React.ElementConfig<typeof DropdownListExperimental>,
    "children"
  >,
  /** The value of the selected list option */
  +value?: ?string,
  /** called when a dropdown option is clicked */
  +onChange: (selected: string) => void,
  /** place holder text that will be displayed when the select input is empty */
  +placeholder?: string,
  /** whether the entire select input is disabled */
  +disabled?: boolean,
  /** the size of the input field */
  +size?: Size,
  /** whether the select input is in an invalid state */
  +isInvalid?: boolean,
  /** whether the select input is in an prefilled state */
  +isPrefilled?: boolean,
  /** Callback when dropdown opens */
  +onOpen?: () => void,
  /** Callback when dropdown closes */
  +onClose?: () => void,
  /** Called when the search text changes */
  // +onSearchTextChange?: string => mixed,
  /** whether or not to autofocus the input */
  +autofocus?: boolean,
  /** $Hide Adds a data-qa-id attribute on the element for testing */
  +dataQaId?: string,
|};

/**
 * @short Use SelectInput when constructing forms, if you need to select only one value from a list but the list is long, enable searching.
 * @category Data Entry
 * @brandStatus V2
 * @status Stable
 */
function SelectInputExperimental({
  placeholder = "",
  disabled = false,
  size = "m",
  isInvalid = false,
  isPrefilled = false,
  children,
  value,
  onChange,
  autofocus,
  dataQaId,
  onOpen,
  onClose,
}: SelectInputProps): React.Node {
  return (
    <DropdownListExperimental
      selected={value}
      onSelection={onChange}
      onOpen={onOpen}
      onClose={onClose}
      hideOnSelection={true}
      parent={
        <TextInput
          readOnly="styledReadOnly"
          dataQaId={dataQaId}
          value={value || ""}
          textOverflow="ellipsis"
          onChange={() => {}}
          isInvalid={isInvalid}
          disabled={disabled}
          placeholder={placeholder}
          size={size}
          isPrefilled={isPrefilled}
          suffix={{iconName: "downOpen"}}
          autofocus={autofocus}
        />
      }
    >
      {children}
    </DropdownListExperimental>
  );
}

SelectInputExperimental.Option = DropdownListExperimental.Option;

export default SelectInputExperimental;