"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 });
const react_1 = __importStar(require("react"));
const useResize_1 = __importDefault(require("../../hooks/useResize"));
const BasicForm = ({ children, onSubmit, buttonId }) => {
    const [currentHeight, setCurrentHeight] = (0, react_1.useState)(0);
    const formRef = (0, react_1.useRef)(null);
    const handleButtonVisible = (0, react_1.useCallback)((visible = true) => {
        var _a;
        const button = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`#${buttonId}`);
        if (button && button.parentElement) {
            button.parentElement.style.transition = 'all 0.4s ease-in-out';
            if (!visible) {
                button.parentElement.style.bottom = '-100px';
                return;
            }
            button.parentElement.style.bottom = '0';
        }
    }, [buttonId]);
    const resizeHandler = (0, react_1.useCallback)(() => {
        if (currentHeight < window.innerHeight) {
            // 키보드가 내려감
            handleButtonVisible(true);
        }
        else if (currentHeight > window.innerHeight) {
            // 키보드가 올라옴
            handleButtonVisible(false);
        }
        setCurrentHeight(window.innerHeight);
    }, [currentHeight, handleButtonVisible]);
    (0, useResize_1.default)(resizeHandler);
    (0, react_1.useEffect)(() => {
        var _a;
        const onFocus = () => {
            handleButtonVisible(false);
        };
        const onBlur = () => {
            handleButtonVisible(true);
        };
        const elementList = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll('input');
        if (elementList && elementList.length > 0) {
            Array.from(elementList).forEach((element) => {
                element.addEventListener('focus', onFocus);
                element.addEventListener('blur', onBlur);
            });
        }
        return () => {
            if (elementList && elementList.length > 0) {
                Array.from(elementList).forEach((element) => {
                    element.removeEventListener('focus', onFocus);
                    element.removeEventListener('blur', onBlur);
                });
            }
        };
    }, [handleButtonVisible, children]);
    return (react_1.default.createElement("form", { ref: formRef, onSubmit: (e) => {
            e.preventDefault();
            e.stopPropagation();
            if (onSubmit) {
                onSubmit(e);
            }
            return false;
        } }, children));
};
exports.default = BasicForm;
