import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
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";
var Select = function Select(_ref) {
  var defaultOptionIdx = _ref.defaultOptionIdx,
    options = _ref.options,
    onChange = _ref.onChange,
    _ref$usei = _ref.usei18,
    usei18 = _ref$usei === void 0 ? false : _ref$usei,
    label = _ref.label,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? '100%' : _ref$width;
  var _useTranslation = useTranslation(),
    t = _useTranslation.t;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    selectorVisible = _useState2[0],
    setSelectorVisible = _useState2[1];
  var _useState3 = useState(defaultOptionIdx || 0),
    _useState4 = _slicedToArray(_useState3, 2),
    selectIdx = _useState4[0],
    setSelectIdx = _useState4[1];
  var ref = useRef(null);
  useClickOutside(ref, function () {
    setSelectorVisible(false);
  });
  return /*#__PURE__*/_jsx(SelectWrap, {
    haveLabel: label !== undefined,
    width: width,
    selectorVisible: selectorVisible,
    children: /*#__PURE__*/_jsxs("div", {
      className: "selectContainer",
      onClick: function 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: usei18 ? "".concat(t(options[selectIdx].name)) : options[selectIdx].name,
        readOnly: true,
        center: true
      }), selectorVisible && /*#__PURE__*/_jsx("div", {
        className: "selector",
        children: options.map(function (option, idx) {
          return /*#__PURE__*/_jsx("div", {
            className: "optionContainer",
            onClick: function onClick() {
              setSelectIdx(idx);
              onChange(options[idx]);
              setSelectorVisible(false);
            },
            children: usei18 ? t(option.name) : option.name
          }, "option".concat(uuid()));
        })
      })]
    })
  });
};
export default Select;