"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const react = require("@emotion/react");
const React = require("react");
const jsxRuntime = require("@emotion/react/jsx-runtime");
require("../../../styles.js");
require("../../CheckBox/style.js");
require("../../RadioButton/RadioButtonWrap.js");
require("../Select/SelectWrap.js");
const down = require("../../../assets/icon/down.svg.js");
const index = require("../../Input/index.js");
require("../../UploadCell/UploadCellWrap.js");
const index$1 = require("../../Loading/Loading/index.js");
require("../../Loading/FolderLoading/style.js");
require("../../Button/Button/style.js");
require("../../Button/NormalButton/style.js");
require("../../Button/SmallButton/style.js");
require("../../Avatar/style.js");
require("react-dom");
require("../../Modal/ModalV1/ModalWrap.js");
require("../../Modal/FullScreenModal/style.js");
require("../../BottomTabBar/style.js");
require("../../Message/index.js");
require("../../Divider/styles.js");
require("../../Header/styles.js");
require("../../Media/index.js");
const SelectNormal = function({
  defaultOption,
  list,
  onChange,
  onClickOutsideFlag,
  setOnClickOutsideFlag,
  cssStyle,
  inputCssStyle,
  notOnlyUserTrigger = true,
  showLoading = false
}) {
  const [selectorVisible, setSelectorVisible] = React.useState(false);
  const [currentName, setCurrentName] = React.useState(
    (defaultOption == null ? void 0 : defaultOption.name) || list[0].name
  );
  const [currentValue, setCurrentValue] = React.useState(
    (defaultOption == null ? void 0 : defaultOption.value) || list[0].value
  );
  const [currentHover, setCurrentHover] = React.useState(
    (defaultOption == null ? void 0 : defaultOption.name) || list[0].name
  );
  const [currentIndex, setCurrentIndex] = React.useState(
    (defaultOption == null ? void 0 : defaultOption.value) ? list.findIndex((el) => el.value === (defaultOption == null ? void 0 : defaultOption.value)) : 0
  );
  const [clickIdx, setClickIdx] = React.useState(-1);
  const [loadingStatus, setLoadingStatus] = React.useState(
    "loading"
  );
  const [newList, setNewList] = React.useState([]);
  React.useEffect(() => {
    var _a, _b, _c;
    if (JSON.stringify(list) !== JSON.stringify(newList.map((el) => ({ name: el.name, value: el.value })))) {
      const index2 = defaultOption ? currentIndex : 0;
      setCurrentName((_a = list[index2]) == null ? void 0 : _a.name);
      setCurrentValue((_b = list[index2]) == null ? void 0 : _b.value);
      setCurrentHover((_c = list[index2]) == null ? void 0 : _c.name);
    }
    setNewList(
      list.map((el, index2) => ({
        ...el,
        checked: index2 === 0
      }))
    );
  }, [list]);
  React.useEffect(() => {
    if (!(defaultOption == null ? void 0 : defaultOption.name))
      return;
    if (JSON.stringify(list) !== JSON.stringify(
      newList.map((el) => ({ name: el.name, value: el.value }))
    ) || notOnlyUserTrigger) {
      setCurrentName(defaultOption == null ? void 0 : defaultOption.name);
      setCurrentValue(defaultOption == null ? void 0 : defaultOption.value);
      setCurrentHover(defaultOption == null ? void 0 : defaultOption.name);
      setCurrentIndex(list.findIndex((el) => el.value === (defaultOption == null ? void 0 : defaultOption.value)));
    }
  }, [defaultOption]);
  React.useEffect(() => {
    if (onClickOutsideFlag) {
      hideSelector();
      setOnClickOutsideFlag == null ? void 0 : setOnClickOutsideFlag(false);
    }
  }, [onClickOutsideFlag]);
  const hideSelector = () => {
    setSelectorVisible(false);
  };
  React.useEffect(() => {
    setLoadingStatus("loading");
  }, [clickIdx]);
  React.useEffect(() => {
    window.addEventListener("click", hideSelector);
    return () => {
      window.removeEventListener("click", hideSelector);
    };
  }, [selectorVisible]);
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      css: react.css`
        position: relative;
        width: 100%;
        cursor: pointer;
        ${cssStyle};
      `,
      onClick: (e) => {
        e.stopPropagation();
        setSelectorVisible(!selectorVisible);
      },
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          "img",
          {
            src: down,
            css: react.css`
          position: absolute;
          top: 0;
          bottom: 0;
          right: 12px;
          margin: auto;
          transform: ${selectorVisible ? "rotate(180deg)" : "0"};
          transition: all 0.3s;
        `
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          index.Input,
          {
            value: currentName,
            inputSkin: "data",
            readOnly: true,
            rootCss: react.css`
          input {
            cursor: pointer;
          }
          ${inputCssStyle}
        `
          }
        ),
        showLoading && /* @__PURE__ */ jsxRuntime.jsx(
          index$1.Loading,
          {
            visible: clickIdx !== -1 && clickIdx === currentIndex,
            size: 28,
            status: loadingStatus,
            type: "dots",
            cssStyle: react.css`
            margin-left: 135px;
            margin-top: -25px;
          `
          }
        ),
        selectorVisible && /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            css: react.css`
            position: absolute;
            top: 35px;
            z-index: 1;
            width: 100%;
            background-color: #f8f7f7;
            border-radius: 8px;
            padding: 5px;
            font-size: 0.75rem;
            line-height: 0.75rem;
            cursor: pointer;
            overflow-y: auto;
            font-family: Poppins;
          `,
            className: "selector",
            children: newList.map((el, index2) => /* @__PURE__ */ jsxRuntime.jsx(
              "div",
              {
                css: react.css`
                display: flex;
                align-items: center;
                padding: 5px;
                border-radius: 8px;
                background-color: ${currentHover === el.name && "#eee"};
                font-family: ${currentName === el.name && "Poppins-SemiBold"};
                font-weight: ${currentName === el.name && "600"};
              `,
                onMouseEnter: () => {
                  setCurrentHover(el.name);
                },
                onClick: async () => {
                  const newList2 = newList.map((el2) => ({ ...el2, checked: false }));
                  newList2[index2].checked = true;
                  setNewList(newList2);
                  setCurrentHover(el.name);
                  setCurrentName(el.name);
                  setCurrentValue(el.value);
                  setCurrentIndex(index2);
                  hideSelector();
                  if (el.value !== currentValue) {
                    if (showLoading) {
                      setClickIdx(index2);
                      if (await onChange({ name: el.name, value: el.value })) {
                        setLoadingStatus("ok");
                      }
                    } else {
                      onChange({ name: el.name, value: el.value });
                    }
                  }
                },
                children: el.name
              },
              index2
            ))
          }
        )
      ]
    }
  );
};
exports.SelectNormal = SelectNormal;
//# sourceMappingURL=index.js.map
