"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;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ResidentNumberInput = void 0;
const react_1 = __importStar(require("react"));
const Styled = __importStar(require("./index.styled"));
const InputFrame_1 = require("../common/InputFrame");
const onlyNumberRegex = /[^0-9]/g;
const ResidentNumberInput = (props) => {
    const { label, placeholder, value, setValue, disabled = false, errorValidation = [], rrnInputType = 13, rrn6, defaultRRN7Only, } = props;
    const [birthInputValue, setBirthInputValue] = (0, react_1.useState)(rrn6 || '');
    const [genderInputValue, setGenderInputValue] = (0, react_1.useState)(defaultRRN7Only || '');
    const [securityInputValue, setSecurityInputValue] = (0, react_1.useState)('');
    const [updateValue, setUpdateValue] = (0, react_1.useState)(value || '');
    const [focused, setFocused] = (0, react_1.useState)(false);
    const active = focused || Boolean(value);
    const showPlaceholderOnlyNotActive = !label && !active && Boolean(placeholder);
    const [errorText, setErrorText] = (0, react_1.useState)('');
    const yymmddRef = (0, react_1.useRef)(null);
    const genderRef = (0, react_1.useRef)(null);
    const securityRef = (0, react_1.useRef)(null);
    const filled = Boolean(updateValue);
    const securityCircleContent = (0, react_1.useMemo)(() => {
        let content = '';
        for (let i = 1; i <= securityInputValue.length; i += 1) {
            content += '●';
        }
        return content;
    }, [securityInputValue]);
    const handleInputValue = (0, react_1.useCallback)((e, setState, limit, nextFocus) => {
        var _a, _b;
        const { value } = e.target;
        const updateValue = value.trim(); // space bar 안 들어가도록
        if (updateValue.length <= limit) {
            setState(updateValue.replace(onlyNumberRegex, ''));
            if (updateValue.length === limit) {
                nextFocus && ((_a = nextFocus.current) === null || _a === void 0 ? void 0 : _a.focus());
            }
        }
        else {
            nextFocus && ((_b = nextFocus.current) === null || _b === void 0 ? void 0 : _b.focus());
        }
    }, []);
    const handleInputOnkeyDown = (0, react_1.useCallback)((e, state, prevRef) => {
        var _a;
        if (state.length <= 0) {
            if (e.key === 'Backspace') {
                return prevRef && ((_a = prevRef.current) === null || _a === void 0 ? void 0 : _a.focus());
            }
        }
    }, []);
    const handleValidateMessage = (0, react_1.useCallback)((inputValue) => {
        for (let i = 0; i < errorValidation.length; i++) {
            if (!errorValidation[i].condition(inputValue) && inputValue.length !== 0) {
                setErrorText(errorValidation[i].errorText);
                break;
            }
            else {
                setErrorText('');
            }
        }
    }, [errorValidation]);
    (0, react_1.useEffect)(() => {
        const value = `${birthInputValue}${genderInputValue}${securityInputValue}`;
        setUpdateValue(value);
        setValue(value);
    }, [birthInputValue, genderInputValue, securityInputValue, setValue]);
    (0, react_1.useEffect)(() => {
        if (!updateValue) {
            setErrorText('');
        }
        if (updateValue.length > 0 && !focused) {
            // 포커스 아웃시 에러 표시
            handleValidateMessage(updateValue);
        }
        if (updateValue.length === 13) {
            handleValidateMessage(updateValue);
        }
    }, [focused, handleValidateMessage, updateValue]);
    (0, react_1.useEffect)(() => {
        if (focused) {
            setErrorText('');
        }
    }, [focused]);
    (0, react_1.useEffect)(() => {
        if (rrn6) {
            setFocused(true);
        }
    }, [rrn6]);
    return (react_1.default.createElement(InputFrame_1.InputFrame, { active: active, focused: focused, errorText: errorText, disabled: disabled, label: label },
        react_1.default.createElement(Styled.BirthInput, { type: "tel", ref: yymmddRef, value: birthInputValue, onChange: (e) => handleInputValue(e, setBirthInputValue, 6, genderRef), focused: focused || filled, onFocus: () => setFocused(true), onBlur: () => setFocused(false), disabled: disabled, hasLabel: Boolean(label), placeholder: showPlaceholderOnlyNotActive ? placeholder : '' }),
        (focused || filled) && (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement(Styled.Hyphen, { visible: birthInputValue.length >= 6, disabled: disabled, hasLabel: Boolean(label) }, "-"),
            react_1.default.createElement(Styled.GenderNumberInput, { type: "tel", value: genderInputValue, onChange: (e) => handleInputValue(e, setGenderInputValue, 1, securityRef), ref: genderRef, onKeyDown: (e) => handleInputOnkeyDown(e, genderInputValue, yymmddRef), onFocus: () => setFocused(true), onBlur: () => setFocused(false), disabled: disabled, hasLabel: Boolean(label) }),
            react_1.default.createElement(Styled.FakeInputWrapper, { hasLabel: Boolean(label) }, rrnInputType === 7 ? (react_1.default.createElement(Styled.VirtualPlaceHolderSevenTypeInput, { visible: genderInputValue.length > 0, onClick: () => { var _a; return genderRef && ((_a = genderRef.current) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: disabled }, "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF")) : (react_1.default.createElement(react_1.default.Fragment, null,
                react_1.default.createElement(Styled.VirtualPlaceHolder, { disabled: disabled }, securityCircleContent),
                react_1.default.createElement(Styled.SecurityPlaceHolder, { visible: genderInputValue.length > 0 }, "\u25CF\u25CF\u25CF\u25CF\u25CF\u25CF"),
                react_1.default.createElement(Styled.FakeSecurityInput, { hasLabel: Boolean(label), type: "tel", ref: securityRef, autoFocus: Boolean(rrn6 && defaultRRN7Only), value: securityInputValue, onClick: () => {
                        var _a;
                        (_a = securityRef.current) === null || _a === void 0 ? void 0 : _a.setSelectionRange(securityInputValue.length, securityInputValue.length);
                    }, onChange: (e) => handleInputValue(e, setSecurityInputValue, 6), onKeyDown: (e) => {
                        if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                            e.preventDefault();
                            e.stopPropagation();
                            return;
                        }
                        handleInputOnkeyDown(e, securityInputValue, genderRef);
                    }, onFocus: () => {
                        setFocused(true);
                    }, onBlur: () => setFocused(false), disabled: disabled }))))))));
};
exports.ResidentNumberInput = ResidentNumberInput;
