"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.selectStyle = void 0;

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

var _ThemeProvider = require("../ThemeProvider");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

var selectStyle = function selectStyle(_ref, _ref2) {
  var size = _ref.size,
      border = _ref.border;
  var colors = _ref2.colors,
      sizes = _ref2.sizes,
      zIndices = _ref2.zIndices;
  return {
    style: {
      // !IMPORTANT: To override any component style, uncomment and add overrides below provided. some properties can be changed in the theme object below
      // clearIndicator: (provided, props) => ({
      //     ...provided,
      //     component overrides go here
      // }),
      container: function container(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          width: '100%',
          minWidth: '10rem'
        });
      },
      control: function control(provided, _ref3) {
        var isFocused = _ref3.isFocused;
        var stateColor = colors.primary[500];
        return _objectSpread(_objectSpread({}, provided), {}, {
          backgroundColor: colors.inputBg,
          boxShadow: 'none',
          borderWidth: border === 'full' && '1px',
          borderBottomWidth: border === 'underline' && '1px',
          borderColor: isFocused ? stateColor : colors.border,
          rounded: border === 'underline' && 0,
          '&:hover': {
            borderColor: stateColor
          }
        });
      },
      dropdownIndicator: function dropdownIndicator(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          height: 16,
          svg: {
            height: 16,
            width: 16
          }
        });
      },
      // group: (provided, props) => ({
      //     ...provided,
      // }),
      // groupHeading: (provided, props) => ({
      //     ...provided,
      // }),
      indicatorsContainer: function indicatorsContainer(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          '> div': {
            padding: '0 8px'
          }
        });
      },
      indicatorSeparator: function indicatorSeparator(provided, props) {
        return {// ...provided,
        };
      },
      // input: (provided, props) => ({
      //     ...provided,
      // }),
      // loadingIndicator: (provided, props) => ({
      //     ...provided,
      // }),
      // loadingMessage: (provided, props) => ({
      //     ...provided,
      // }),
      menu: function menu(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          backgroundColor: colors.popoverBg,
          color: colors.bodyText,
          zIndex: zIndices.dropdown
        });
      },
      // menuList: (provided, props) => ({
      //     ...provided,
      // }),
      // menuPortal: (provided, props) => ({
      //     ...provided,
      // }),
      // multiValue: (provided, props) => ({
      //     ...provided,
      // }),
      // multiValueLabel: (provided, props) => ({
      //     ...provided,
      // }),
      // multiValueRemove: (provided, props) => ({
      //     ...provided,
      // }),
      // noOptionsMessage: (provided, props) => ({
      //     ...provided,
      // }),
      // option: (provided, props) => ({
      //     ...provided,
      // }),
      // placeholder: (provided, props) => ({
      //     ...provided,
      // }),
      singleValue: function singleValue(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          color: colors.bodyText
        });
      },
      valueContainer: function valueContainer(provided, props) {
        return _objectSpread(_objectSpread({}, provided), {}, {
          padding: border === 'underline' ? '1px 0' : '1px 8px'
        });
      }
    },
    theme: {
      root: {// borderRadius: 0,
      },
      colors: {
        danger: colors.error[500],
        dangerLight: colors.error[200],
        neutral0: colors.neutral[1],
        neutral5: colors.neutral[3],
        neutral10: colors.neutral[4],
        neutral20: colors.neutral[5],
        // border and dropdown indicator
        neutral30: colors.neutral[6],
        neutral40: colors.neutral[7],
        neutral50: colors.faintText,
        neutral60: colors.neutral[9],
        neutral70: colors.neutral[10],
        neutral80: colors.bodyText,
        neutral90: colors.neutral[12],
        primary: colors.primary[500],
        primary25: colors.selectControlHover,
        primary50: colors.primary[200],
        primary75: colors.primary[300]
      },
      spacing: {
        // baseUnit: 4,
        controlHeight: sizes.input[size] // menuGutter: 8,

      }
    }
  };
};

exports.selectStyle = selectStyle;

var useSelectStyle = function useSelectStyle(props) {
  var theme = (0, _ThemeProvider.useTheme)();
  var styles = theme['styles'].select ? theme['styles'].select(props, theme) : selectStyle(props, theme);
  return {
    root: styles.style,
    theme: styles.theme
  };
};

var _default = useSelectStyle;
exports["default"] = _default;
//# sourceMappingURL=styles.js.map