import React, { useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { SelectWrap } from "./SelectWrap";
import Input from "../Input";
import { uuid } from "../..\\utils\\uuid";
import { useClickOutside } from "../..\\utils\\useClickOutSide";
import iconDown from "../../../styles/assets/icon/down.svg";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
const Select = ({
  defaultOptionIdx,
  options,
  onChange,
  usei18: _usei = false,
  label,
  width: _width = '100%'
}) => {
  const {
    t
  } = useTranslation();
  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 !== undefined,
    width: _width,
    selectorVisible: selectorVisible,
    children: /*#__PURE__*/_jsxs("div", {
      className: "selectContainer",
      onClick: e => {
        e.stopPropagation();
        setSelectorVisible(!selectorVisible);
      },
      ref: ref,
      children: [/*#__PURE__*/_jsx("img", {
        src: iconDown,
        className: "icon"
      }), label && /*#__PURE__*/_jsx("div", {
        className: "inputLabel",
        children: t(label)
      }), /*#__PURE__*/_jsx(Input, {
        value: _usei ? `${t(options[selectIdx].name)}` : options[selectIdx].name,
        readOnly: true,
        center: true
      }), selectorVisible && /*#__PURE__*/_jsx("div", {
        className: "selector",
        children: options.map((option, idx) => /*#__PURE__*/_jsx("div", {
          className: "optionContainer",
          onClick: () => {
            setSelectIdx(idx);
            onChange(options[idx]);
            setSelectorVisible(false);
          },
          children: _usei ? t(option.name) : option.name
        }, `option${uuid()}`))
      })]
    })
  });
};
export default Select;