import _JSXStyle from "styled-jsx/style";
// Generated with util/create-component.js
import React, { Children, useRef, useState } from "react";
import classnames from "classnames";
import useTheme from "../../hooks/useTheme";
import isThemePalette from "../../utils/isThemePalette";
import contrast from "../../utils/contrast";
import opacity from "../../utils/opacity";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export const Select = props => {
  const theme = useTheme();
  const {
    startAdornment = null,
    endAdornment = "▾",
    fullWidth = false,
    color = "basic",
    textColor = null,
    borderColor = null,
    size = "medium",
    shape = "round",
    variant = "contained",
    align = "spaced",
    required = false,
    disabled = false,
    placeholder = "Select...",
    error = false,
    success = false,
    helperText = null,
    wrapperProps = null,
    inputProps = null,
    value = null,
    onChange = null,
    children,
    className,
    name = "select",
    id = "",
    maxHeight = 200,
    ...otherProps
  } = props;
  const options = Children.toArray(children).filter(child => child.type === "option").map(child => child.props);
  const [visible, setVisible] = useState(false);
  const [selectedOption, setSelectedOption] = useState(options.find(option => option.value == value) || null);
  const [selectedValue, setSelectedValue] = useState(selectedOption ? selectedOption.value : null);
  const selectRef = useRef(null);

  function handleValue(value) {
    return value ? typeof value === "number" ? `${value}px` : value : "0px";
  }

  function handleBackgroundColor() {
    if (error) {
      switch (variant) {
        case "ghost":
          return `background: ${opacity(theme.palette.danger[500], 20)};`;
      }
    }

    if (success) {
      switch (variant) {
        case "ghost":
          return `background: ${opacity(theme.palette.success[500], 20)};`;
      }
    }

    switch (variant) {
      case "contained":
        return `background: ${isThemePalette(color) ? theme.palette[color][500] : color};`;

      case "outlined":
        return `background: ${"transparent"};`;

      case "ghost":
        return `background: ${isThemePalette(color) ? opacity(theme.palette[color][500], 8) : opacity(color, 8)};`;

      default:
        return "";
    }
  }

  function handleOptionsBackground() {
    return `background: ${theme.palette.highlight};`;
  }

  function handleOptionsTextColor() {
    return `color: ${theme.palette.text}; stroke: ${theme.palette.text};`;
  }

  function handleOptionsBorderColor() {
    return `border-color: ${theme.palette.shade};`;
  }

  function handleOptionsShape() {
    switch (shape) {
      case "round":
        return "border-radius: 1em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleDisabledColors() {
    if (!disabled) return "";

    switch (variant) {
      case "contained":
        return `background: ${opacity(theme.palette.shade, 100)};
        color: ${opacity(theme.palette.text, 40)};
        stroke: ${opacity(theme.palette.text, 40)};
        border-color: ${opacity(theme.palette.shade, 100)};
        `;

      case "outlined":
        return `background: ${opacity(theme.palette.shade, 100)};
        color: ${opacity(theme.palette.text, 40)};
        stroke: ${opacity(theme.palette.text, 40)};
        border-color: ${opacity(theme.palette.text, 40)};`;

      case "ghost":
        return `background: ${"transparent"};
        color: ${opacity(theme.palette.text, 50)};
        stroke: ${opacity(theme.palette.text, 50)};
        border-color: ${"transparent"};`;

      default:
        return "";
    }
  }

  function handleBorderColor() {
    if (error) {
      switch (variant) {
        case "contained":
          return `border-color: ${theme.palette.danger[500]};`;

        case "outlined":
          return `border-color: ${theme.palette.danger[500]};`;
      }
    }

    if (success) {
      switch (variant) {
        case "contained":
          return `border-color: ${theme.palette.success[500]};`;

        case "outlined":
          return `border-color: ${theme.palette.success[500]};`;
      }
    }

    switch (variant) {
      case "contained":
        return `border-color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;

      case "outlined":
        return `border-color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;

      case "ghost":
        return "border-color: transparent;";

      default:
        return "";
    }
  }

  function handleTextColor() {
    if (textColor) return `color: ${textColor};`; // if value is defined by props

    if (color === "basic") return `color: ${theme.palette.text};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${contrast(isThemePalette(color) ? theme.palette[color][500] : color)};
        stroke: ${contrast(isThemePalette(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${isThemePalette(color) ? theme.palette[color][500] : color};
        stroke: ${isThemePalette(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handlePlaceholderColor() {
    if (textColor) return `color: ${opacity(textColor, 80)};`; // if value is defined by props

    if (color === "basic" || disabled) return `color: ${theme.palette.subtext};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${isThemePalette(color) ? theme.palette[color][100] : color};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handleHelperColor() {
    if (success) return `color: ${theme.palette.success[500]};`; // if value is basic

    if (error) return `color: ${theme.palette.danger[500]};`; // if value is basic

    if (color === "basic") return `color: ${theme.palette.subtext};`; // if value is basic

    switch (variant) {
      case "contained":
        return `color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${isThemePalette(color) ? theme.palette[color][500] : color};`;
    }
  }

  function handleFontSize() {
    switch (size) {
      case "xlarge":
        return "font-size: 18px;";

      case "large":
        return "font-size: 16px;";

      case "small":
        return "font-size: 12px;";

      case "mini":
        return "font-size: 10px;";

      case "medium":
      default:
        return "font-size: 14px;";
    }
  }

  function handlePadding() {
    switch (size) {
      case "xlarge":
        return "padding: 12px 16px;";

      case "large":
        return "padding: 10px 14px;";

      case "small":
        return "padding: 6px 8px;";

      case "mini":
        return "padding: 4px 6px;";

      case "medium":
      default:
        return "padding: 8px 10px;";
    }
  }

  function handleShape() {
    switch (shape) {
      case "round":
        return "border-radius: 2em;";

      case "rounded":
        return "border-radius: 0.7em;";

      case "square":
        return "border-radius: 0em;";

      default:
        return "border-radius: 0.7em;";
    }
  }

  function handleAlign() {
    switch (align) {
      case "left":
        return "justify-content: flex-start;";

      case "right":
        return "justify-content: flex-end;";

      case "spaced":
        return "justify-content: space-between;";

      case "center":
      default:
        return "justify-content: center;";
    }
  }

  return /*#__PURE__*/_jsxs("div", {
    "data-testid": "Wps-SelectWrapper",
    ...wrapperProps,
    onClick: () => {
      if (!disabled) {
        setVisible(!visible);
      }
    },
    className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + (wrapperProps && wrapperProps.className != null && wrapperProps.className || classnames("Wps-SelectWrapper") || ""),
    children: [/*#__PURE__*/_jsx(_JSXStyle, {
      id: "2067232394",
      dynamic: [fullWidth ? "100%" : "max-content"],
      children: `.Wps-SelectWrapper.__jsx-style-dynamic-selector{position:relative;display:inline-block;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:${fullWidth ? "100%" : "max-content"};-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;}`
    }), /*#__PURE__*/_jsxs("div", {
      className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + "Wps-SelectedValue",
      children: [startAdornment && /*#__PURE__*/_jsx("span", {
        style: {
          paddingRight: 5
        },
        className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]),
        children: startAdornment
      }), (selectedOption == null ? void 0 : selectedOption.children) || placeholder, endAdornment && /*#__PURE__*/_jsx("span", {
        style: {
          paddingLeft: 5
        },
        className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]),
        children: endAdornment
      })]
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1923803811",
      dynamic: [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()],
      children: `.Wps-SelectedValue.__jsx-style-dynamic-selector{width:100%;height:100%;cursor:${disabled ? "not-allowed" : "pointer"};-webkit-transition:all 250ms ease 0ms;transition:all 250ms ease 0ms;border-style:solid;border-width:2px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;${handleBorderColor()} ${handleShape()} ${handleBackgroundColor()} ${handleFontSize()} ${handleAlign()} ${handlePadding()} ${selectedValue ? handleTextColor() : handlePlaceholderColor()} ${handleDisabledColors()};}`
    }), /*#__PURE__*/_jsx("select", {
      name: name,
      id: id,
      "data-testid": "Wps-Select",
      ref: selectRef,
      value: selectedValue,
      disabled: disabled,
      required: required,
      ...inputProps,
      ...otherProps,
      className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || inputProps && inputProps.className != null && inputProps.className || "Wps-Select"),
      children: options.map(option => /*#__PURE__*/_jsx("option", { ...option,
        className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + (option && option.className != null && option.className || "")
      }, option.value))
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "4252648261",
      children: ".Wps-Select.jsx-4252648261{display:none;}"
    }), visible && /*#__PURE__*/_jsx("div", {
      className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + "Wps-SelectItems",
      children: options.map(option => /*#__PURE__*/_jsx("div", {
        onClick: () => {
          if (!disabled) {
            setSelectedOption(option);
            setSelectedValue(option.value);
            onChange && onChange(option.value);
          }

          setVisible(false);
        },
        ...option,
        className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + (option && option.className != null && option.className || "Wps-SelectItem")
      }, option.value))
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "4002603011",
      dynamic: [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()],
      children: `.Wps-SelectItems.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;border-width:1px;border-style:solid;${handleOptionsBackground()} ${handleOptionsBorderColor()} ${handleOptionsShape()} max-height:${handleValue(maxHeight)};overflow-y:auto;z-index:1;}.Wps-SelectItem.__jsx-style-dynamic-selector{width:100%;height:100%;padding:10px;border-bottom-width:1px;border-bottom-style:solid;${handleFontSize()} ${handlePadding()} ${handleOptionsTextColor()} ${handleOptionsBorderColor()} cursor:pointer;}.Wps-SelectItem.__jsx-style-dynamic-selector:last-child{border-bottom-width:0px;border-bottom-style:none;}.Wps-Wps-SelectItem.__jsx-style-dynamic-selector:hover{background-color:rgba(0,0,0,0.1);}`
    }), /*#__PURE__*/_jsx("div", {
      className: "jsx-4252648261 " + _JSXStyle.dynamic([["2067232394", [fullWidth ? "100%" : "max-content"]], ["1923803811", [disabled ? "not-allowed" : "pointer", handleBorderColor(), handleShape(), handleBackgroundColor(), handleFontSize(), handleAlign(), handlePadding(), selectedValue ? handleTextColor() : handlePlaceholderColor(), handleDisabledColors()]], ["4002603011", [handleOptionsBackground(), handleOptionsBorderColor(), handleOptionsShape(), handleValue(maxHeight), handleFontSize(), handlePadding(), handleOptionsTextColor(), handleOptionsBorderColor()]], ["1021049161", [handleHelperColor()]]]) + " " + "Wps-Helper",
      children: helperText
    }), /*#__PURE__*/_jsx(_JSXStyle, {
      id: "1021049161",
      dynamic: [handleHelperColor()],
      children: `.Wps-Helper.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;font-size:12px;margin-top:4px;${handleHelperColor()};}`
    })]
  });
};