var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __read = (this && this.__read) || function (o, n) {
    var m = typeof Symbol === "function" && o[Symbol.iterator];
    if (!m) return o;
    var i = m.call(o), r, ar = [], e;
    try {
        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
    }
    catch (error) { e = { error: error }; }
    finally {
        try {
            if (r && !r.done && (m = i["return"])) m.call(i);
        }
        finally { if (e) throw e.error; }
    }
    return ar;
};
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
        if (ar || !(i in from)) {
            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
            ar[i] = from[i];
        }
    }
    return to.concat(ar || Array.prototype.slice.call(from));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useMemo, useState } from 'react';
import { maskSeparatorChars, maskSpecChars } from 'src/lib/constants';
import css from './MaskedInputNumber.module.scss';
import { _cx } from 'src/utility/class';
var cx = _cx(css);
export default function MaskedInputNumber(_a) {
    var value = _a.value, onChange = _a.onChange, id = _a.id, mask = _a.mask, prefix = _a.prefix, isInValid = _a.isInValid, _b = _a.error, error = _b === void 0 ? false : _b, _c = _a.showError, showError = _c === void 0 ? false : _c, buttonProps = _a.buttonProps, wrapperStyle = _a.wrapperStyle, inputStyle = _a.inputStyle, borderColor = _a.borderColor, bgColor = _a.bgColor, isDOB = _a.isDOB, handleOnBlur = _a.handleOnBlur, placeholder = _a.placeholder;
    var _d = __read(useState(false), 2), inFocusNotEmpty = _d[0], setInFocusNotEmptyvalue = _d[1];
    var _e = __read(useState(false), 2), errorBorder = _e[0], setErrorBorder = _e[1];
    var _f = __read(useState(false), 2), touched = _f[0], setTouched = _f[1];
    var _g = __read(useState(false), 2), wasValidOnce = _g[0], setWasValidOnce = _g[1];
    var _h = __read(useState(mask ? (value.length > 0 ? mask.slice(value.length, mask.length) : mask) : ''), 2), maskValue = _h[0], setMaskValue = _h[1];
    var maskSeparator = useMemo(function () {
        var sep = '';
        mask === null || mask === void 0 ? void 0 : mask.split('').some(function (maskChar) {
            if (maskSeparatorChars.includes(maskChar)) {
                sep = maskChar;
                return true;
            }
            return false;
        });
        return sep;
    }, [mask]);
    var maskIndices = useMemo(function () {
        return mask
            .split('')
            .reduce(function (indices, char, i) {
            return maskSpecChars.includes(char) ? __spreadArray(__spreadArray([], __read(indices), false), [{ index: i, char: char }], false) : indices;
        }, []);
    }, [mask, maskSpecChars]);
    useEffect(function () {
        if (!error)
            setErrorBorder(false);
        if (touched && wasValidOnce && error)
            setErrorBorder(true);
    }, [error, touched, wasValidOnce]);
    useEffect(function () {
        !isInValid && touched && setWasValidOnce(true);
    }, [isInValid, touched]);
    useEffect(function () {
        if (showError && error)
            setErrorBorder(true);
    }, [showError]);
    return (_jsxs("div", { className: cx('input-wrapper'), style: wrapperStyle, children: [prefix && _jsx("div", { className: cx('prefix'), children: prefix }), _jsx("div", { className: cx('styled-input', {
                    isInValid: isInValid,
                    isValid: !isInValid,
                    errorBorder: errorBorder,
                    inFocusNotEmpty: inFocusNotEmpty,
                }), style: __assign(__assign({}, inputStyle), (maskValue.length < ((mask === null || mask === void 0 ? void 0 : mask.length) || 0)
                    ? {
                        paddingLeft: 10 +
                            (maskIndices.length > 1
                                ? value.includes(maskSeparator)
                                    ? value.split('').filter(function (c) { return maskSpecChars.includes(c); }).length > 1
                                        ? value.length * 8
                                        : value.length * 8
                                    : value.length * 10
                                : value.length > 7
                                    ? value.length > 9
                                        ? value.length * 8
                                        : value.length * 8
                                    : value.length * 7.2) +
                            (!!(prefix === null || prefix === void 0 ? void 0 : prefix.length) ? 30 : 0),
                    }
                    : {})), children: !!value.length ? maskValue : '' }), _jsx("input", { className: cx('transparent-input', { hasPrefix: !!(prefix === null || prefix === void 0 ? void 0 : prefix.length) }), id: id, value: value, placeholder: placeholder, onChange: function (e) {
                    var inputVal = e.target.value;
                    if (inputVal === '' || (inputVal.length === 1 && maskSpecChars.includes(inputVal))) {
                        onChange({ target: { value: '' } });
                        mask && setMaskValue(mask);
                        return;
                    }
                    var newVal = inputVal;
                    var lastChar = inputVal[inputVal.length - 1];
                    if (
                    //@ts-ignore
                    (lastChar && isNaN(lastChar) && !maskSpecChars.includes(lastChar)) ||
                        (value.length + 1 === newVal.length && lastChar && maskSpecChars.includes(lastChar))) {
                        return;
                    }
                    var hasNaNChar = false;
                    newVal.split('').some(function (c) {
                        // @ts-ignore
                        var isNaNChar = isNaN(c) && !maskSpecChars.includes(c);
                        if (isNaNChar)
                            hasNaNChar = isNaNChar;
                        return isNaNChar;
                    });
                    if (hasNaNChar)
                        return;
                    maskSpecChars.forEach(function (specChar) {
                        // @ts-ignore
                        newVal = newVal.replaceAll(specChar, '');
                    });
                    var valArray = newVal.split('');
                    maskIndices.forEach(function (ind) {
                        if (valArray[ind.index]) {
                            valArray.splice(ind.index, 0, ind.char);
                        }
                    });
                    newVal = valArray.join('');
                    if (mask && !!!newVal.length) {
                        setMaskValue(mask);
                    }
                    else {
                        setMaskValue(mask.slice(newVal.length, mask.length));
                    }
                    onChange({ target: { value: newVal } });
                    setTouched(true);
                }, onBlur: function () {
                    setInFocusNotEmptyvalue(false);
                    setTouched(true);
                    setWasValidOnce(true);
                    handleOnBlur && handleOnBlur();
                }, maxLength: mask === null || mask === void 0 ? void 0 : mask.length, style: __assign({}, ((inputStyle === null || inputStyle === void 0 ? void 0 : inputStyle.width) ? { width: inputStyle.width } : {})) }), buttonProps && buttonProps.button] }));
}
