"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
  var target = {};
  for (var prop in source)
    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
      target[prop] = source[prop];
  if (source != null && __getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(source)) {
      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
        target[prop] = source[prop];
    }
  return target;
};
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var Dropdown_exports = {};
__export(Dropdown_exports, {
  default: () => Dropdown_default
});
module.exports = __toCommonJS(Dropdown_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = __toESM(require("react"));
var import_styled_components = __toESM(require("styled-components"));
var import_downshift = __toESM(require("downshift"));
var import_prop_types = require("prop-types");
var import_yoga_icons = require("@gympass/yoga-icons");
var import_Helper = __toESM(require("../../Input/web/Helper"));
var import_Input = __toESM(require("../../Input/web/Input"));
const Wrapper = import_styled_components.default.div`
  ${({
  full,
  theme: {
    yoga: {
      components: { dropdown }
    }
  }
}) => `
    position: relative;
    display: inline-block;
    vertical-align: top;

    width: ${full ? "100%" : `${dropdown.width}px`};
  `}
`;
const labelTransition = import_styled_components.css`
  ${({
  theme: {
    yoga: {
      transition,
      components: { input, dropdown }
    }
  }
}) => `
    transform: translateY(-${input.height / 2 - 2}px);
    transition-property: transform, font-size, color;
    transition-duration: ${transition.duration[1]}ms;
    transition-timing-function: cubic-bezier(${transition.timing[0].join()});

    font-size: ${input.label.font.size.typed}px;
    color: ${dropdown.input.label.color};
  `}
`;
const Selector = import_styled_components.default.div`
  ${({
  isOpen,
  disabled,
  selected,
  error,
  theme: {
    yoga: {
      colors,
      components: { dropdown }
    }
  }
}) => import_styled_components.css`
    ${!disabled ? `
          fieldset {
            ${isOpen || selected ? `border-color: ${dropdown.hover.selector.border.color};` : ""}

            ${error && !isOpen ? `border-color: ${colors.feedback.attention[1]};
                ` : ""}
          }
          &:hover {
            fieldset {
              border-color: ${error && !isOpen ? dropdown.hover.selector.border.error : dropdown.hover.selector.border.color};
            }
          }
        ` : ""}
  `}
`;
const Field = (0, import_styled_components.default)(import_Input.default)`
  pointer-events: none;

  ${({ value, isOpen, disabled }) => import_styled_components.css`
    ${isOpen && !disabled ? import_styled_components.css`
          & ~ legend {
            max-width: max-content;
          }

          & ~ label {
            ${labelTransition};
          }
        ` : ""}

    ${value && !disabled ? import_styled_components.css`
          & ~ label {
            ${labelTransition};
          }
        ` : ""}
  `}
`;
const Button = import_styled_components.default.button`
  ${({
  disabled,
  theme: {
    yoga: {
      components: { dropdown }
    }
  }
}) => `
    display: flex;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    padding-right: ${dropdown.button.padding.right}px;
    padding-top: ${dropdown.button.padding.top}px;
    padding-bottom: ${dropdown.button.padding.bottom}px;

    border: none;
    outline: none;
    background-color: transparent;
    cursor: ${disabled ? "not-allowed" : "pointer"};
  `}
`;
const OptionsList = import_styled_components.default.ul`
  ${({
  isMaxHeight,
  theme: {
    yoga: {
      components: { dropdown }
    }
  }
}) => `
    position: absolute;
    top: 46px;
    z-index: 1;
    box-sizing: border-box;

    width: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style-type: none;

    background: ${dropdown.optionsList.backgroundColor};
    border-width: ${dropdown.optionsList.border.width}px;
    border-style: solid;
    border-color: ${dropdown.optionsList.border.color};
    border-top: none;

    border-radius:
        ${dropdown.option.border.radius.topLeft}px
        ${dropdown.option.border.radius.topRight}px
        ${dropdown.option.border.radius.bottomRight}px
        ${dropdown.option.border.radius.bottomLeft}px;

    ${isMaxHeight && `max-height: ${dropdown.option.height * 3.5}px;`}
  `}
`;
const Option = import_styled_components.default.li`
  ${({
  isSelected,
  highlighted,
  theme: {
    yoga: {
      baseFont,
      components: { dropdown }
    }
  }
}) => `
    display: flex;
    align-items: center;
    height: ${dropdown.option.height}px;
    padding:
      ${dropdown.option.padding.top}px
      ${dropdown.option.padding.right}px
      ${dropdown.option.padding.bottom}px
      ${dropdown.option.padding.left}px;
    cursor: pointer;

    font-family: ${baseFont.family};
    font-size: ${isSelected ? dropdown.selected.option.font.size : dropdown.option.font.size}px;
    line-height: ${dropdown.option.font.lineHeight}px;

    font-weight: ${isSelected ? `${dropdown.selected.option.font.weight}` : `${dropdown.option.font.weight}`};

    color: ${isSelected ? dropdown.selected.option.font.color : dropdown.option.font.color};

    ${highlighted ? `background-color: ${dropdown.hover.option.backgroundColor};` : ""}

    &:hover {
      background-color: ${dropdown.hover.option.backgroundColor};
    }

    &:last-child {
      border-radius:
        ${dropdown.option.border.radius.topLeft}px
        ${dropdown.option.border.radius.topRight}px
        ${dropdown.option.border.radius.bottomRight}px
        ${dropdown.option.border.radius.bottomLeft}px;
    }
  `}
`;
const ArrowIcon = (0, import_styled_components.default)((_a) => {
  var _b = _a, { isOpen, selected } = _b, props = __objRest(_b, ["isOpen", "selected"]);
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_yoga_icons.ChevronDown, __spreadValues({ width: 20, height: 20 }, props));
})`
  ${({
  isOpen,
  selected,
  disabled,
  theme: {
    yoga: {
      components: { dropdown }
    }
  }
}) => `
    fill: ${dropdown.arrow.fill};
    ${disabled ? `fill: ${dropdown.disabled.arrow.disabled};` : ""};
    ${selected && !disabled ? `fill: ${dropdown.selected.arrow.fill};` : ""};
    transform: rotate(${isOpen ? "180deg" : "0"});
  `}
`;
const noop = () => {
};
const Dropdown = import_react.default.forwardRef(
  (_c, ref) => {
    var _d = _c, {
      error,
      label = "",
      disabled = false,
      full = false,
      options,
      onChange = noop,
      isMaxHeight = true
    } = _d, rest = __objRest(_d, [
      "error",
      "label",
      "disabled",
      "full",
      "options",
      "onChange",
      "isMaxHeight"
    ]);
    const inputRef = ref || import_react.default.useRef(null);
    const selectedOption = options.find((item) => item.selected === true);
    const [localSelectedItem, setLocalSelectedItem] = (0, import_react.useState)(selectedOption);
    (0, import_react.useEffect)(() => {
      setLocalSelectedItem(selectedOption);
    }, [options]);
    const onLocalChange = (0, import_react.useCallback)(
      (opt) => {
        setLocalSelectedItem(opt);
        onChange(opt);
      },
      [onChange]
    );
    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
      import_downshift.default,
      {
        initialSelectedItem: selectedOption,
        selectedItemChanged: (prevItem, item) => prevItem !== item,
        itemToString: (item) => item ? item.label : "",
        onChange: onLocalChange,
        selectedItem: localSelectedItem,
        children: ({
          getInputProps,
          getItemProps,
          getRootProps,
          getMenuProps,
          getToggleButtonProps,
          selectedItem,
          highlightedIndex,
          isOpen
        }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Wrapper, __spreadProps(__spreadValues(__spreadValues({ full }, getRootProps()), rest), { children: [
          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
            Selector,
            {
              isOpen,
              disabled,
              error,
              selected: selectedItem !== null,
              children: [
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  Field,
                  __spreadValues({
                    readOnly: true,
                    disabled,
                    selected: selectedItem !== null,
                    isOpen,
                    label,
                    full,
                    ref: inputRef,
                    includeAriaAttributes: false
                  }, getInputProps())
                ),
                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                  Button,
                  __spreadProps(__spreadValues({
                    isOpen,
                    disabled
                  }, getToggleButtonProps()), {
                    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                      ArrowIcon,
                      {
                        isOpen,
                        selected: selectedItem !== null,
                        disabled
                      }
                    )
                  })
                )
              ]
            }
          ),
          isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
            OptionsList,
            __spreadProps(__spreadValues({
              isMaxHeight,
              selected: selectedItem !== null
            }, getMenuProps()), {
              children: options.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                Option,
                __spreadProps(__spreadValues({}, getItemProps({
                  key: item.value,
                  item,
                  isSelected: selectedItem === item,
                  highlighted: highlightedIndex === index
                })), {
                  children: item.label
                })
              ))
            })
          ),
          error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Helper.default, { error })
        ] }))
      }
    );
  }
);
Dropdown.propTypes = {
  label: import_prop_types.string,
  disabled: import_prop_types.bool,
  error: import_prop_types.string,
  full: import_prop_types.bool,
  /** { label (string), value (string or number), selected: (boolean) } */
  options: (0, import_prop_types.arrayOf)(
    (0, import_prop_types.shape)({
      label: import_prop_types.string,
      value: (0, import_prop_types.oneOfType)([import_prop_types.string, import_prop_types.number]),
      selected: import_prop_types.bool
    })
  ).isRequired,
  onChange: import_prop_types.func,
  isMaxHeight: import_prop_types.bool
};
var Dropdown_default = Dropdown;
