import "@emotion/react";
import { useState, useRef } from "react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
import { SelectWrap } from "./SelectWrap.js";
import iconDown from "../../../assets/icon/down.svg.js";
import { Input } from "../../Input/index.js";
import { useClickOutside } from "../../Modal/hooks/useClickOutSide.js";
import { uuid } from "../../../utils/uuid.js";
const Select = ({
  defaultOptionIdx,
  options,
  onChange,
  usei18 = false,
  label,
  width = "100%",
  cssStyle,
  className,
  style
}) => {
  const [selectorVisible, setSelectorVisible] = useState(false);
  const [selectIdx, setSelectIdx] = useState(defaultOptionIdx || 0);
  const ref = useRef(null);
  useClickOutside(ref, () => {
    setSelectorVisible(false);
  });
  return /* @__PURE__ */ jsx(
    SelectWrap,
    {
      haveLabel: label !== void 0,
      width,
      selectorVisible,
      css: cssStyle,
      className,
      style,
      children: /* @__PURE__ */ jsxs(
        "div",
        {
          className: "selectContainer",
          onClick: (e) => {
            e.stopPropagation();
            setSelectorVisible(!selectorVisible);
          },
          ref,
          children: [
            /* @__PURE__ */ jsx("img", { src: iconDown, className: "icon" }),
            label && /* @__PURE__ */ jsx("div", { className: "inputLabel", children: label }),
            /* @__PURE__ */ jsx(
              Input,
              {
                value: usei18 ? `${options[selectIdx].name}` : options[selectIdx].name,
                readOnly: true
              }
            ),
            selectorVisible && /* @__PURE__ */ jsx("div", { className: "selector", children: options.map((option, idx) => /* @__PURE__ */ jsx(
              "div",
              {
                className: "optionContainer",
                onClick: () => {
                  setSelectIdx(idx);
                  onChange == null ? void 0 : onChange(options[idx]);
                  setSelectorVisible(false);
                },
                children: usei18 ? option.name : option.name
              },
              `option${uuid()}`
            )) })
          ]
        }
      )
    }
  );
};
export {
  Select
};
//# sourceMappingURL=index.js.map
