import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
var _excluded = ["getStyles", "value", "isDisabled", "isFocused", "isSelected", "children", "innerProps"],
    _excluded2 = ["value", "options", "className", "placeholder", "label", "searchPlaceholder", "onClear", "onChange", "isSearchable", "inputText", "isOpen", "setIsOpen"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

/* eslint-disable prefer-destructuring */

/* eslint-disable react/destructuring-assignment */
import React, { useState } from "react";
import Select, { components } from "react-select";
import PropTypes from "prop-types";
import cx from "classnames";
import { isEmpty } from "lodash";
import { getColors } from "../styles/colors";
import getClasses from "./styles";
import ChevronUp from "../Icon/ChevronUp";
import ChevronDown from "../Icon/ChevronDown";
import SearchIcon from "../Icon/Search";
import Times from "../Icon/Times";
import CssFlex from "../CssFlex";
import Typography from "../Typography";
import Popover from "../lab/Popover";

var InputOption = function InputOption(_ref) {
  var getStyles = _ref.getStyles,
      value = _ref.value,
      isDisabled = _ref.isDisabled,
      isFocused = _ref.isFocused,
      isSelected = _ref.isSelected,
      children = _ref.children,
      innerProps = _ref.innerProps,
      rest = _objectWithoutProperties(_ref, _excluded);

  var _useState = useState(isSelected),
      _useState2 = _slicedToArray(_useState, 2),
      isActive = _useState2[0],
      setIsActive = _useState2[1];

  var onMouseDown = function onMouseDown() {
    return setIsActive(true);
  };

  var onMouseUp = function onMouseUp() {
    return setIsActive(false);
  };

  var onMouseLeave = function onMouseLeave() {
    return setIsActive(false);
  };

  var classes = getClasses(); // styles

  var bg = "transparent";
  if (isFocused) bg = getColors().neutral[100];
  var style = {
    backgroundColor: bg
  }; // prop assignment

  var props = _objectSpread(_objectSpread({}, innerProps), {}, {
    onMouseDown: onMouseDown,
    onMouseUp: onMouseUp,
    onMouseLeave: onMouseLeave,
    style: style
  });

  return /*#__PURE__*/React.createElement(components.Option, _extends({}, rest, {
    isDisabled: isDisabled,
    isFocused: isFocused,
    isSelected: isSelected,
    getStyles: getStyles,
    innerProps: props
  }), /*#__PURE__*/React.createElement(CssFlex, {
    align: "center",
    gap: "sm"
  }, /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    checked: isSelected,
    readOnly: true,
    className: classes.checkbox,
    disabled: isDisabled
  }), /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    align: "left",
    shade: isDisabled ? 300 : 400
  }, children)));
};

var Placeholder = function Placeholder(props) {
  return /*#__PURE__*/React.createElement(components.Placeholder, props, /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 400
  }, props.children));
};

var SearchIndicator = function SearchIndicator() {
  return /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center",
    sx: {
      mx: "sm"
    }
  }, /*#__PURE__*/React.createElement(SearchIcon, {
    shade: 400
  }));
};

var ClearIndicator = function ClearIndicator(_ref2) {
  var onClear = _ref2.onClear;
  var classes = getClasses();
  return /*#__PURE__*/React.createElement("button", {
    type: "button",
    onClick: onClear,
    className: classes.clearIndicator
  }, /*#__PURE__*/React.createElement(Times, {
    color: "neutral",
    shade: 500
  }));
};

var NoOptionsMessage = function NoOptionsMessage(props) {
  return /*#__PURE__*/React.createElement(components.NoOptionsMessage, props, /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 400
  }, props.children));
};

var MultipleSelect = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var classes = getClasses();
  var colors = getColors();

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      isOpenAux = _React$useState2[0],
      setIsOpenAux = _React$useState2[1];

  var value = props.value,
      options = props.options,
      className = props.className,
      placeholder = props.placeholder,
      label = props.label,
      searchPlaceholder = props.searchPlaceholder,
      onClear = props.onClear,
      onChange = props.onChange,
      isSearchable = props.isSearchable,
      inputText = props.inputText,
      isOpen = props.isOpen,
      setIsOpen = props.setIsOpen,
      restProps = _objectWithoutProperties(props, _excluded2);

  var inputClassName = cx(classes.root, _defineProperty({}, classes.inputOpen, isOpen || isOpenAux), className);
  var styles = {
    menuPortal: function menuPortal(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        zIndex: 9999
      });
    },
    control: function control(base, state) {
      return _objectSpread(_objectSpread({}, base), {}, {
        borderRadius: 8,
        display: isSearchable ? "flex" : "none",
        marginLeft: 8,
        marginRight: 8,
        minWidth: 240,
        minHeight: "48px",
        width: "auto",
        fontFamily: "Montserrat",
        fontWeight: 600,
        fontSize: "14px",
        color: colors.neutral[700],
        borderWidth: 2,
        boxShadow: "none",
        borderColor: colors.neutral[300],
        transitionProperty: "all",
        transitionDuration: "300ms",
        "&:hover": {
          borderColor: state.isFocused ? colors.neutral[500] : colors.neutral[400],
          "& svg": {
            "& path": {
              fill: colors.neutral[500]
            }
          }
        },
        "&:active": {
          borderColor: colors.primary[500]
        }
      });
    },
    menu: function menu(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        minWidth: 240,
        paddingTop: "8px",
        position: "relative",
        backgroundColor: "white",
        borderTopRightRadius: 0,
        borderTopLeftRadius: 0,
        boxShadow: "none"
      });
    },
    option: function option(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        backgroundColor: colors.neutral[300]
      });
    },
    menuList: function menuList(base) {
      return _objectSpread(_objectSpread({}, base), {}, {
        "&::-webkit-scrollbar": {
          width: "12px",
          backgroundColor: "#fff"
        },
        "&::-webkit-scrollbar-track": {
          backgroundColor: "#fff"
        },
        "&::-webkit-scrollbar-thumb": {
          backgroundColor: colors.neutral[300],
          borderRadius: "16px",
          border: "4px solid #fff"
        }
      });
    }
  };

  var DropdownIndicator = function DropdownIndicator() {
    return /*#__PURE__*/React.createElement(CssFlex, {
      alignItems: "center",
      sx: {
        mx: "sm"
      }
    }, isOpen || isOpenAux ? /*#__PURE__*/React.createElement(ChevronUp, {
      color: "currentColor",
      className: classes.chevronUp
    }) : /*#__PURE__*/React.createElement(ChevronDown, {
      color: "currentColor",
      className: classes.chevronDown
    }));
  };

  return /*#__PURE__*/React.createElement("div", null, label && /*#__PURE__*/React.createElement(Typography, {
    variant: "small",
    shade: 700,
    sx: {
      mb: "xs"
    }
  }, label), /*#__PURE__*/React.createElement(Popover, {
    open: isOpen || isOpenAux,
    onOpenChange: function onOpenChange(open) {
      return setIsOpen ? setIsOpen(open) : setIsOpenAux(open);
    }
  }, /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement("div", {
    className: inputClassName
  }, /*#__PURE__*/React.createElement("button", {
    type: "button",
    className: classes.button
  }, !isEmpty(value) && /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 500
  }, !inputText ? "".concat(value.length, " items selected") : inputText), isEmpty(value) && /*#__PURE__*/React.createElement(Typography, {
    variant: "inputText",
    shade: 400
  }, placeholder)), /*#__PURE__*/React.createElement(CssFlex, {
    alignItems: "center"
  }, !isEmpty(value) && /*#__PURE__*/React.createElement(ClearIndicator, {
    onClear: onClear
  }), /*#__PURE__*/React.createElement(DropdownIndicator, {
    isOpen: isOpen || isOpenAux
  })))), /*#__PURE__*/React.createElement(Popover.Portal, null, /*#__PURE__*/React.createElement(Popover.Content, {
    className: classes.popoverContent,
    align: "start"
  }, /*#__PURE__*/React.createElement(Select, _extends({
    ref: ref,
    defaultValue: value,
    className: classes.select,
    components: {
      DropdownIndicator: SearchIndicator,
      Option: InputOption,
      Placeholder: Placeholder,
      NoOptionsMessage: NoOptionsMessage,
      IndicatorSeparator: function IndicatorSeparator() {
        return null;
      }
    },
    isMulti: true,
    closeMenuOnSelect: false,
    hideSelectedOptions: false,
    onChange: onChange,
    options: options,
    menuIsOpen: true,
    controlShouldRenderValue: false,
    isClearable: false,
    placeholder: searchPlaceholder,
    styles: styles
  }, restProps))))));
});
MultipleSelect.propTypes = {
  label: PropTypes.string,
  placeholder: PropTypes.string,
  searchPlaceholder: PropTypes.string,
  inputText: PropTypes.string,
  className: PropTypes.string,
  value: PropTypes.instanceOf(Array),
  onClear: PropTypes.func,
  isSearchable: PropTypes.bool,
  isOpen: PropTypes.bool,
  setIsOpen: PropTypes.func
};
MultipleSelect.defaultProps = {
  label: "",
  className: "",
  placeholder: "Select accounts...",
  inputText: "",
  searchPlaceholder: "Search...",
  value: [],
  onClear: function onClear() {},
  isSearchable: false,
  isOpen: undefined,
  setIsOpen: undefined
};
export default MultipleSelect;