"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectBoxStyled = exports.SelectBox = void 0;
const List_1 = require("../../library/List");
const Icon_1 = require("../../Icon");
const BottomSheet_1 = require("../BottomSheet");
const Colors_1 = require("../../core/Colors");
const react_1 = __importStar(require("react"));
const BaseInput_1 = require("../Input/BaseInput");
const Styled = __importStar(require("./index.styled"));
const useLayoutIsMobile_1 = __importDefault(require("../../hooks/useLayoutIsMobile"));
const SelectBox = (props) => {
    var _a;
    const { label, placeholder, itemList, onChange, disabled, errorValidation, value, bottomSheetTitle } = props;
    const [name, setName] = (0, react_1.useState)((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
    const [mouseOut, setMouseOut] = (0, react_1.useState)(false);
    const [visibleItemList, setVisibleItemList] = (0, react_1.useState)(false);
    const isMobile = (0, useLayoutIsMobile_1.default)();
    const handleVisibleItemList = (0, react_1.useCallback)((visible) => {
        setVisibleItemList(visible);
    }, []);
    (0, react_1.useEffect)(() => {
        var _a;
        setName((_a = itemList.find((item) => item.value === value)) === null || _a === void 0 ? void 0 : _a.label);
    }, [itemList, value]);
    return (react_1.default.createElement(Styled.Wrapper, null,
        react_1.default.createElement(Styled.IconWrapper, { rotateArrow: visibleItemList },
            react_1.default.createElement(Icon_1.ChevronDownSIcon, { fillColor: Colors_1.basicColors.gray200 })),
        react_1.default.createElement(BaseInput_1.BaseInput, { disabled: disabled, className: "select-box", label: label, placeholder: placeholder, readOnly: true, onClick: () => setVisibleItemList(!visibleItemList), focusedAnimation: false, value: name, onBlur: () => {
                if (mouseOut) {
                    handleVisibleItemList(false);
                }
            }, errorValidation: errorValidation }),
        visibleItemList && (react_1.default.createElement(Styled.Desktop, null,
            react_1.default.createElement(Styled.ItemListWrapper, { onMouseOver: () => setMouseOut(false), onMouseOut: () => setMouseOut(true) },
                react_1.default.createElement(Styled.ItemList, null, itemList.map((item) => {
                    const { label, value } = item;
                    return (react_1.default.createElement(Styled.Item, { key: label, onClick: () => {
                            setName(label);
                            onChange(value);
                            handleVisibleItemList(false);
                        } }, label));
                })),
                react_1.default.createElement(Styled.ListBottomMargin, null)))),
        isMobile && ( // fyi. (PC 모드) useOverlayPreventScroll 호출자체를 안해야해서 렌더링안함.
        react_1.default.createElement(BottomSheet_1.TitleBottomSheet, { visible: visibleItemList, onMaskClick: () => handleVisibleItemList(false) },
            react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Body, { hasContentPadding: false },
                react_1.default.createElement(BottomSheet_1.TitleBottomSheet.Title, { hasContentPadding: false, title: bottomSheetTitle }),
                react_1.default.createElement(List_1.BottomSheetItemList, { item: itemList, onClick: ({ value }) => {
                        onChange(value);
                        handleVisibleItemList(false);
                    } }))))));
};
exports.SelectBox = SelectBox;
exports.SelectBoxStyled = __importStar(require("./index.styled"));
