var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
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;
};
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import styled, { withTheme } from "styled-components";
import {
  arrayOf,
  func,
  shape,
  number,
  string,
  bool,
  oneOfType
} from "prop-types";
import { TouchableWithoutFeedback, View } from "react-native";
import { ChevronDown } from "@gympass/yoga-icons";
import Options from "./Options";
import Backdrop from "./Backdrop";
import Text from "../../Text";
import Helper from "../../Input/native/Helper";
const Selector = styled.View`
  ${({
  disabled,
  selected,
  error,
  full,
  theme: {
    yoga: {
      colors,
      components: { dropdown }
    }
  }
}) => `
    position: relative;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    width: ${full ? "100%" : `${dropdown.width}px`};
    padding: ${dropdown.selector.padding.top}px
      ${dropdown.selector.padding.right}px
      ${dropdown.selector.padding.bottom}px
      ${dropdown.selector.padding.left}px;

    background-color: ${dropdown.selector.background};
    border-radius: ${dropdown.selector.border.radius}px;
    border-width: ${dropdown.selector.border.width}px;
    border-style: solid;
    border-color: ${error ? colors.feedback.attention[1] : dropdown.selector.border.color};

    ${disabled ? `border-color: ${dropdown.disabled.selector.border.color};` : ""};
    ${selected ? `border-color: ${dropdown.selected.selector.border.color};` : ""};
  `}
`;
const Label = styled(Text.Body2)`
  ${({
  disabled,
  selected,
  theme: {
    yoga: {
      components: { dropdown }
    }
  }
}) => `
    color: ${dropdown.input.font.color};
    ${disabled ? `color: ${dropdown.disabled.input.font.color};` : ""}
    ${selected ? `color: ${dropdown.selected.input.font.color};` : ""}
  `}
`;
const getSelectedOption = (options) => options.find((item) => item.selected === true);
const Dropdown = React.forwardRef(
  (_a, ref) => {
    var _b = _a, {
      error = void 0,
      label = "",
      disabled = false,
      full = false,
      options,
      cancelActionLabel = "Cancel",
      confirmActionLabel = "Confirm",
      onChange = () => {
      },
      theme: {
        yoga: {
          components: { dropdown }
        }
      }
    } = _b, rest = __objRest(_b, [
      "error",
      "label",
      "disabled",
      "full",
      "options",
      "cancelActionLabel",
      "confirmActionLabel",
      "onChange",
      "theme"
    ]);
    const [selected, toggleIsSelected] = useState(getSelectedOption(options));
    const [isOpen, toggleIsOpen] = useState(false);
    const iconColor = () => {
      if (disabled)
        return dropdown.disabled.arrow.fill;
      if (selected)
        return dropdown.selected.arrow.fill;
      return dropdown.arrow.fill;
    };
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx(
        TouchableWithoutFeedback,
        {
          accessibilityRole: "button",
          onPress: () => !disabled && toggleIsOpen(true),
          children: /* @__PURE__ */ jsxs(View, { children: [
            /* @__PURE__ */ jsxs(
              Selector,
              __spreadProps(__spreadValues({
                full,
                disabled,
                selected,
                error
              }, rest), {
                ref,
                children: [
                  /* @__PURE__ */ jsx(Label, { disabled, selected, children: selected && selected.label || label }),
                  /* @__PURE__ */ jsx(ChevronDown, { width: 20, height: 20, fill: iconColor() })
                ]
              })
            ),
            error && !selected && /* @__PURE__ */ jsx(Helper, { error })
          ] })
        }
      ),
      /* @__PURE__ */ jsx(
        Backdrop,
        {
          visible: isOpen,
          title: label,
          onClose: () => toggleIsOpen(false),
          children: /* @__PURE__ */ jsx(
            Options,
            {
              options,
              selectedOption: selected,
              cancelActionLabel,
              confirmActionLabel,
              onClose: () => toggleIsOpen(false),
              onSelect: (item) => {
                toggleIsSelected(item);
                onChange(item);
                toggleIsOpen(false);
              }
            }
          )
        }
      )
    ] });
  }
);
Dropdown.propTypes = {
  label: string,
  disabled: bool,
  error: string,
  full: bool,
  /** { label (string), value (string or number), selected: (boolean) } */
  options: arrayOf(
    shape({
      label: string,
      value: oneOfType([string, number]),
      selected: bool
    })
  ).isRequired,
  /** Cancel label that will be shown in iOS option chooser */
  cancelActionLabel: string,
  /** Confirm label that will be shown in iOS option chooser */
  confirmActionLabel: string,
  onChange: func
};
var Dropdown_default = withTheme(Dropdown);
export {
  Dropdown_default as default
};
