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 from 'react';
import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
import defaultStyle from './Select.module.css';
import selectConstants from './Select.constantProps';
import selectPropTypes, { defaultProps, propsDescription } from './Select.propTypes';
import ListItem, { ListBox } from '../listitem/ListItem';
import ListItemPropTypes, { defaultProps as listItemDefaultProps, propsDescription as listItemPropsDescription } from '../listitem/ListItem.propTypes';
import ListItemConstants from '../listitem/ListItem.constantProps';
import selectCssJSLogic from './Select.cssJSLogic';
import ArrowFillDown from '@zohodesk/icon/es/general/ArrowFillDown';
export default function Select(props) {
  const {
    selectedValue,
    disabled,
    readonly,
    icon,
    onChange,
    customStyle,
    children,
    // Popup component props
    isPopupOpen,
    togglePopup,
    getTargetRef,
    getContainerRef,
    // Accessiblity
    needAccess,
    accessProps,
    triggerProps,
    valueProps,
    menuProps,
    rootElementProps,
    emptyState,
    onScroll,
    tagGeneralAttributes: {
      triggerGeneralAttributes = {},
      menuGeneralAttributes = {}
    },
    tagAttributes: {
      triggerTagAttributes = {},
      menuTagAttributes = {}
    }
  } = props; // const elementRef = React.createRef(null);
  // console.log(selectedValue,'selectedValue')
  // let hasIcon = (startIcon || endIcon);

  const style = useMergeStyle(defaultStyle, customStyle);
  let {
    selectClassName,
    selectIconClassName,
    listboxClassName
  } = selectCssJSLogic(props, style);
  let arrowDownIcon = icon || /*#__PURE__*/React.createElement(ArrowFillDown, {
    customStyle: {
      base: isPopupOpen ? style.arrowRotate : style.arrowIcon
    }
  });
  return /*#__PURE__*/React.createElement("div", _extends({}, triggerGeneralAttributes, {
    className: style.base
  }, rootElementProps, triggerTagAttributes), /*#__PURE__*/React.createElement("div", _extends({
    className: style.selectedContent,
    onClick: disabled || readonly ? null : togglePopup,
    ref: getTargetRef
  }, valueProps, triggerProps), /*#__PURE__*/React.createElement("div", {
    className: selectClassName
  }, selectedValue), arrowDownIcon && /*#__PURE__*/React.createElement("span", {
    className: selectIconClassName
  }, arrowDownIcon)), isPopupOpen ? /*#__PURE__*/React.createElement(ListBox, _extends({
    getRef: getContainerRef,
    tagGeneralAttributes: menuGeneralAttributes,
    onChange: onChange
  }, menuProps, {
    needAccess: needAccess,
    accessProps: accessProps,
    onScroll: onScroll,
    customStyle: {
      listBox: `${style.optionContainer} ${listboxClassName}`
    },
    tagAttributes: menuTagAttributes
  }), children.length ? children : emptyState && emptyState()) : null);
}
export function OptionSkeleton(props) {
  const {
    tagGeneralAttributes,
    tagAttributes
  } = props;
  return /*#__PURE__*/React.createElement(ListItem, _extends({
    tagGeneralAttributes: tagGeneralAttributes
  }, props, {
    tagAttributes: tagAttributes
  }));
}
Select.propTypes = selectPropTypes;
Select.defaultProps = defaultProps;
Select.propsDescription = propsDescription;
Select.constantProps = selectConstants;
OptionSkeleton.propTypes = ListItemPropTypes;
OptionSkeleton.defaultProps = listItemDefaultProps;
OptionSkeleton.propsDescription = listItemPropsDescription;
OptionSkeleton.constantProps = ListItemConstants;