import { css } from "@emotion/react";
import { useState, useEffect } from "react";
import { jsxs, jsx } from "@emotion/react/jsx-runtime";
import "../../../styles.js";
import "../../CheckBox/style.js";
import "../../RadioButton/RadioButtonWrap.js";
import "../Select/SelectWrap.js";
import iconDown from "../../../assets/icon/down.svg.js";
import { Input } from "../../Input/index.js";
import "../../UploadCell/UploadCellWrap.js";
import { Loading } from "../../Loading/Loading/index.js";
import "../../Loading/FolderLoading/style.js";
import "../../Button/Button/style.js";
import "../../Button/NormalButton/style.js";
import "../../Button/SmallButton/style.js";
import "../../Avatar/style.js";
import "react-dom";
import "../../Modal/ModalV1/ModalWrap.js";
import "../../Modal/FullScreenModal/style.js";
import "../../BottomTabBar/style.js";
import "../../Message/index.js";
import "../../Divider/styles.js";
import "../../Header/styles.js";
import "../../Media/index.js";
const SelectNormal = function({
  defaultOption,
  list,
  onChange,
  onClickOutsideFlag,
  setOnClickOutsideFlag,
  cssStyle,
  inputCssStyle,
  notOnlyUserTrigger = true,
  showLoading = false
}) {
  const [selectorVisible, setSelectorVisible] = useState(false);
  const [currentName, setCurrentName] = useState(
    (defaultOption == null ? void 0 : defaultOption.name) || list[0].name
  );
  const [currentValue, setCurrentValue] = useState(
    (defaultOption == null ? void 0 : defaultOption.value) || list[0].value
  );
  const [currentHover, setCurrentHover] = useState(
    (defaultOption == null ? void 0 : defaultOption.name) || list[0].name
  );
  const [currentIndex, setCurrentIndex] = useState(
    (defaultOption == null ? void 0 : defaultOption.value) ? list.findIndex((el) => el.value === (defaultOption == null ? void 0 : defaultOption.value)) : 0
  );
  const [clickIdx, setClickIdx] = useState(-1);
  const [loadingStatus, setLoadingStatus] = useState(
    "loading"
  );
  const [newList, setNewList] = useState([]);
  useEffect(() => {
    var _a, _b, _c;
    if (JSON.stringify(list) !== JSON.stringify(newList.map((el) => ({ name: el.name, value: el.value })))) {
      const index = defaultOption ? currentIndex : 0;
      setCurrentName((_a = list[index]) == null ? void 0 : _a.name);
      setCurrentValue((_b = list[index]) == null ? void 0 : _b.value);
      setCurrentHover((_c = list[index]) == null ? void 0 : _c.name);
    }
    setNewList(
      list.map((el, index) => ({
        ...el,
        checked: index === 0
      }))
    );
  }, [list]);
  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]);
  useEffect(() => {
    if (onClickOutsideFlag) {
      hideSelector();
      setOnClickOutsideFlag == null ? void 0 : setOnClickOutsideFlag(false);
    }
  }, [onClickOutsideFlag]);
  const hideSelector = () => {
    setSelectorVisible(false);
  };
  useEffect(() => {
    setLoadingStatus("loading");
  }, [clickIdx]);
  useEffect(() => {
    window.addEventListener("click", hideSelector);
    return () => {
      window.removeEventListener("click", hideSelector);
    };
  }, [selectorVisible]);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      css: css`
        position: relative;
        width: 100%;
        cursor: pointer;
        ${cssStyle};
      `,
      onClick: (e) => {
        e.stopPropagation();
        setSelectorVisible(!selectorVisible);
      },
      children: [
        /* @__PURE__ */ jsx(
          "img",
          {
            src: iconDown,
            css: css`
          position: absolute;
          top: 0;
          bottom: 0;
          right: 12px;
          margin: auto;
          transform: ${selectorVisible ? "rotate(180deg)" : "0"};
          transition: all 0.3s;
        `
          }
        ),
        /* @__PURE__ */ jsx(
          Input,
          {
            value: currentName,
            inputSkin: "data",
            readOnly: true,
            rootCss: css`
          input {
            cursor: pointer;
          }
          ${inputCssStyle}
        `
          }
        ),
        showLoading && /* @__PURE__ */ jsx(
          Loading,
          {
            visible: clickIdx !== -1 && clickIdx === currentIndex,
            size: 28,
            status: loadingStatus,
            type: "dots",
            cssStyle: css`
            margin-left: 135px;
            margin-top: -25px;
          `
          }
        ),
        selectorVisible && /* @__PURE__ */ jsx(
          "div",
          {
            css: 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, index) => /* @__PURE__ */ jsx(
              "div",
              {
                css: 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[index].checked = true;
                  setNewList(newList2);
                  setCurrentHover(el.name);
                  setCurrentName(el.name);
                  setCurrentValue(el.value);
                  setCurrentIndex(index);
                  hideSelector();
                  if (el.value !== currentValue) {
                    if (showLoading) {
                      setClickIdx(index);
                      if (await onChange({ name: el.name, value: el.value })) {
                        setLoadingStatus("ok");
                      }
                    } else {
                      onChange({ name: el.name, value: el.value });
                    }
                  }
                },
                children: el.name
              },
              index
            ))
          }
        )
      ]
    }
  );
};
export {
  SelectNormal
};
//# sourceMappingURL=index.js.map
