"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SelectWithFilter = void 0;

var _style = _interopRequireDefault(require("styled-jsx/style"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _useTheme = _interopRequireDefault(require("../../hooks/useTheme"));

var _isThemePalette = _interopRequireDefault(require("../../utils/isThemePalette"));

var _contrast = _interopRequireDefault(require("../../utils/contrast"));

var _opacity = _interopRequireDefault(require("../../utils/opacity"));

var _jsxRuntime = require("react/jsx-runtime");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

// Generated with util/create-component.js
const SelectWithFilter = props => {
  var _getSelected;

  const theme = (0, _useTheme.default)();
  const {
    startAdornment = null,
    endAdornment = "▾",
    fullWidth = false,
    color = "basic",
    textColor = null,
    borderColor = null,
    size = "medium",
    shape = "round",
    variant = "contained",
    required = false,
    disabled = false,
    error = false,
    success = false,
    helperText = null,
    children,
    className,
    list,
    onChange,
    selected,
    defaultValue,
    placeholder = "Select...",
    filterPlaceholder = "Filter...",
    ...otherProps
  } = props; // START PROCESSING

  const [show, setShow] = (0, _react.useState)(false);
  const [filter, setFilter] = (0, _react.useState)("");
  const ref = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    function handleClick(event) {
      // Se o usuário clicar fora da select fechar
      if (ref.current && !ref.current.contains(event.target) && show) {
        setShow(false);
      }
    }

    window.addEventListener("click", handleClick);
    return () => window.removeEventListener("click", handleClick);
  }, [show]);
  (0, _react.useEffect)(() => {
    // Resetar o filtro se a select for fechada
    if (show == false) {
      setFilter("");
    }
  }, [show]); // Pegar o item selecionado

  function getSelected() {
    if (Array.isArray(list)) {
      for (let item of list) {
        if (item.id == selected) {
          return item;
        }
      }
    }

    return null;
  } // END PROCESSING


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

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

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

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

      case "ghost":
        return `background: ${(0, _isThemePalette.default)(color) ? (0, _opacity.default)(theme.palette[color][500], 8) : (0, _opacity.default)(color, 8)};`;

      default:
        return "";
    }
  }

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

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

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

      case "ghost":
        return `background: ${"transparent"};
        color: ${(0, _opacity.default)(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: ${(0, _isThemePalette.default)(color) ? theme.palette[color][500] : color};`;

      case "outlined":
        return `border-color: ${(0, _isThemePalette.default)(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: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

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

  function handlePlaceholderColor() {
    if (textColor) return `color: ${(0, _opacity.default)(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: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${(0, _isThemePalette.default)(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: ${(0, _contrast.default)((0, _isThemePalette.default)(color) ? theme.palette[color][500] : color)};`;

      case "outlined":
      case "ghost":
      default:
        return `color: ${(0, _isThemePalette.default)(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 0px;";
  //     case "large":
  //       return "padding: 10px 0px;";
  //     case "small":
  //       return "padding: 6px 0px;";
  //     case "mini":
  //       return "padding: 4px 0px;";
  //     case "medium":
  //     default:
  //       return "padding: 8px 0px;";
  //   }
  // }


  function handlePaddingWrapper() {
    switch (size) {
      case "xlarge":
        return "padding: 0px 16px;";

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

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

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

      case "medium":
      default:
        return "padding: 0px 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;";
    }
  }

  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: ref,
    "data-testid": "Wps-SelectWithFilterWrapper",
    onClick: () => {
      if (show == false) {
        setShow(true);
      }
    },
    ...otherProps,
    className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + (otherProps && otherProps.className != null && otherProps.className || (0, _classnames.default)("Wps-SelectWithFilterWrapper", show ? "open" : "") || ""),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "297225148",
      dynamic: [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)],
      children: `.Wps-SelectWithFilterWrapper.__jsx-style-dynamic-selector{${handleBorderColor()} ${handleShape()} ${handleBackgroundColor()} border-style:solid;border-width:2px;position:relative;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;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;${handleTextColor()} ${handleDisabledColors()} ${handleFontSize()} ${handlePaddingWrapper()};}.Wps-SelectedWithFilterInput.__jsx-style-dynamic-selector{font-size:1rem;width:100%;${handleShape()} border-width:0px;${handleBackgroundColor()} ${handlePlaceholderColor()} border-style:solid;}.Wps-SelectWithFilterWrapper.__jsx-style-dynamic-selector .items.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:100%;border-radius:0 0 0.3rem 0.3rem;z-index:100000;max-height:15rem;overflow-y:auto;border-width:2px;${handleBackgroundColor()} ${handleBorderColor()};}.Wps-SelectWithFilterWrapper.__jsx-style-dynamic-selector .items.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector{padding:0.5rem;cursor:pointer;font-size:1rem;font-weight:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}.Wps-SelectWithFilterWrapper.__jsx-style-dynamic-selector .items.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector:hover{background-color:${(0, _opacity.default)(handleTextColor(), 80)};}.Wps-SelectWithFilterWrapper.__jsx-style-dynamic-selector .items.__jsx-style-dynamic-selector .item.__jsx-style-dynamic-selector:first-child{border-radius:0;}`
    }), startAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingRight: 5
      },
      className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]),
      children: startAdornment
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + "Wps-SelectedWithFilterSelected",
      children: show ? /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
        autoFocus: true,
        type: "text",
        placeholder: filterPlaceholder,
        value: filter ? filter : "",
        onChange: event => setFilter(event.target.value),
        className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + "Wps-SelectedWithFilterInput"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]),
        children: getSelected() ? (_getSelected = getSelected()) == null ? void 0 : _getSelected.name : defaultValue ? defaultValue : placeholder
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "810954878",
      children: ".Wps-SelectedWithFilterSelected.jsx-810954878{cursor:pointer;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}"
    }), endAdornment && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      style: {
        paddingLeft: 5
      },
      className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]),
      children: endAdornment
    }), show ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + "items",
        children: Array.isArray(list) ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
          children: [defaultValue && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            onClick: () => {
              setShow(false);
              onChange && onChange(null);
            },
            className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + ("item " + (selected === null ? "selected" : "") || ""),
            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
              className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]),
              children: defaultValue
            })
          }), list.map((value, index) => {
            var _value$name;

            // Filtro de itens por ID e por Nome
            if ((value == null ? void 0 : value.id) == filter || value != null && (_value$name = value.name) != null && _value$name.toLowerCase().includes(filter == null ? void 0 : filter.toLowerCase())) {
              // Se o item atual for o selecionado exibir uma classe diferente
              return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                onClick: () => {
                  setShow(false);
                  onChange && onChange(value);
                },
                className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + ("item " + (value.id == selected ? "selected" : "") || ""),
                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
                  className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]),
                  children: value.name
                })
              }, index);
            }

            return null;
          })]
        }) : null
      })
    }) : null, helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: "jsx-810954878 " + _style.default.dynamic([["297225148", [handleBorderColor(), handleShape(), handleBackgroundColor(), fullWidth ? "100%" : "max-content", handleTextColor(), handleDisabledColors(), handleFontSize(), handlePaddingWrapper(), handleShape(), handleBackgroundColor(), handlePlaceholderColor(), handleBackgroundColor(), handleBorderColor(), (0, _opacity.default)(handleTextColor(), 80)]], ["4095212534", [handleHelperColor()]]]) + " " + "Wps-Helper",
      children: helperText
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_style.default, {
      id: "4095212534",
      dynamic: [handleHelperColor()],
      children: `.Wps-Helper.__jsx-style-dynamic-selector{position:absolute;top:100%;left:0;font-size:12px;margin-top:4px;z-index:1;${handleHelperColor()}s;}`
    })]
  });
};

exports.SelectWithFilter = SelectWithFilter;