function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

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.module.css";
import ListItem, { ListBox } from "../../listitem/ListItem";
import ListItemConstantProps from "../../listitem/ListItem.constantProps";
import SelectPropTypes from "../Select.propTypes";

function SelectComponent(props) {
  let [valToggle, toggleState] = useState(false);
  let elementRef = /*#__PURE__*/React.createRef(null);
  let [selected, setSelected] = useState("value two");
  let [selectedIndex, setSelectedIndex] = useState(2);
  let {
    triggerProps,
    labelProps,
    valueProps,
    menuProps,
    menuItemProps
  } = useSelectAriaProps(props, "", {
    focus: true,
    wrap: true,
    activecss: style.focus
  });

  let togglePopup = () => {
    toggleState(valToggle => !valToggle);
  };

  let handleSelect = (label, index) => {
    setSelected(() => label);
    toggleState(false);
    setSelectedIndex(() => index);
  };

  let values = ["value one", "value two", "value three", "value four", "value five", "value six", "value seven", "value eight"];
  labelProps = labelProps();
  triggerProps = triggerProps();
  valueProps = valueProps();
  menuProps = menuProps();
  let {
    buttonProps
  } = useButtonAriaProps({ ...triggerProps,
    elementType: "span"
  }); // <div style={{display : valToggle ? 'block' : 'none' }}>

  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", labelProps, " Choose on Element"), /*#__PURE__*/React.createElement("span", _extends({}, buttonProps, valueProps, {
    onClick: togglePopup
  }), " ", selected, " "), valToggle && /*#__PURE__*/React.createElement(RestoreFocus, {
    getElementRef: elementRef
  }, /*#__PURE__*/React.createElement("div", _extends({}, menuProps, {
    ref: elementRef
  }), React.Children.map(props.children, child => {
    return /*#__PURE__*/React.cloneElement(child, {
      onSelect: props.onSelect.bind(this, child.props.id),
      togglePopup: togglePopup,
      menuItemProps: menuItemProps
    });
  }))));
}

function Option1(props) {
  let {
    children,
    onSelect,
    active,
    menuItemProps,
    togglePopup
  } = props;
  let {
    itemId,
    ...menuItemProp
  } = menuItemProps(props, {
    focus: true,
    wrap: true,
    activecss: style.focus
  });

  let handleSelect = value => {
    togglePopup && togglePopup();
    onSelect && onSelect();
  };

  return /*#__PURE__*/React.createElement("div", _extends({}, menuItemProp, {
    className: active ? style.focus2 : "",
    onClick: handleSelect
  }), " ", children);
}

export default function Select__default(props) {
  let [selectedId, setSelectedId] = useState("blue");
  let values = ["value one", "value two", "value three", "value four", "value five", "value six", "value seven", "value eight"];
  let dataDd = [{
    id: "red",
    value: "Red"
  }, {
    id: "blue",
    value: "Blue"
  }, {
    id: "green",
    value: "Green"
  }];
  let selectedValue = "Green";

  let handleSelect = (value, e) => {
    setSelectedId(value);
    console.log(e.target); //api
  };

  return /*#__PURE__*/React.createElement("div", {
    style: {
      padding: "0 20px 50px 20px"
    }
  }, /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("div", null, "Selected value "), /*#__PURE__*/React.createElement(Select, {
    onChange: handleSelect,
    selectedValue: selectedId
  }, /*#__PURE__*/React.createElement(Option, {
    value: "red"
  }, "Red"), /*#__PURE__*/React.createElement(Option, {
    value: "green",
    onChange: value => {
      console.log(value, "option");
    }
  }, "Green \u2660", " "), /*#__PURE__*/React.createElement(Option, {
    value: "blue",
    disabled: true
  }, "Blue"), /*#__PURE__*/React.createElement(Option, {
    value: "yellow"
  }, " ", /*#__PURE__*/React.createElement("span", {
    style: {
      padding: "20px",
      display: "inline-block"
    }
  }, "Yellow \u2666", " "), " "), /*#__PURE__*/React.createElement(Option, {
    value: "orange"
  }, "Orange \u2663 "), /*#__PURE__*/React.createElement(Option, {
    value: "rose"
  }, " Rose \u2665 ")));
}

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