import React, { useState, useEffect } from "react";
import Select, { Option } from "../Select";
import componentCategories from "../../../docs-utils/componentCategories";
import componentGroups from "../../../docs-utils/componentGroups";
import useSelectAriaProps from "../controllers/useSelectAriaProps";
import useButtonAriaProps from "../../deprecated/button/useButtonAriaProps";
import RestoreFocus from "../../focusscope/FocusScope";
import style from "./Select.model.decorator.module.css";
import ListItem, { ListBox, ListSection } from "../../listitem/ListItem";
import ListItemConstantProps from "../../listitem/ListItem.constantProps";
import getDocIcon, { docsIcons } from "../../docsIcons";

const RenderAsIcon = props => props.icon;

const values = ["value one", "value two", "value three", "value four", "value five", "value six", "value seven", "value eight"];
const ar1 = ["value four one", "value five one", "value six one", "value seven one", "value eight one"];
export default function Select__scroll() {
  const [list, setList] = useState(values);
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Select, {
    defaultValue: "value one",
    "data-aria-rootid": "1649831993055",
    onGetNextOptions: e => {
      const val = [...values, ...ar1];
      setList(val);
    },
    icon: /*#__PURE__*/React.createElement(RenderAsIcon, {
      icon: getDocIcon(docsIcons.arrowLink, style.iconBase)
    }),
    needIconRotate: true
  }, /*#__PURE__*/React.createElement(ListSection, {
    title: "value"
  }, list.map((val, i) => /*#__PURE__*/React.createElement(Option, {
    key: i,
    text: val,
    id: val,
    value: val,
    variant: ListItemConstantProps.color.secondary
  }))), /*#__PURE__*/React.createElement(ListSection, {
    title: "ar1"
  }, ar1.map((val, i) => /*#__PURE__*/React.createElement(Option, {
    key: i,
    text: val,
    id: val,
    value: val,
    variant: ListItemConstantProps.color.secondary
  })))));
}

if (false) {
  Select__scroll.docs = {
    componentGroup: componentGroups.Components,
    folderName: componentCategories.UCL
  };
}