const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_objectWithoutProperties = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js");
const require_index = require("../../../input/index.js");
const require_utils = require("./utils.js");
let react = require("react");
react = require_runtime.__toESM(react);
require("./index.less");
//#region src/components/pisellInput/components/BankCard/index.tsx
const _excluded = ["onChange", "value"];
const bankCardMaxLength = (str) => {
	return str.slice(0, 19);
};
const BankCard = (props) => {
	const { onChange, value: propsValue } = props, others = require_objectWithoutProperties._objectWithoutProperties(props, _excluded);
	const inputRef = (0, react.useRef)(null);
	const [_value, setValue] = (0, react.useState)(propsValue || "");
	const [currentBankType, setCurrentBankType] = (0, react.useState)();
	(0, react.useEffect)(() => {
		document.body.id = "body";
	}, []);
	(0, react.useEffect)(() => {
		setValue(bankCardMaxLength(formatBankCardNumber(`${propsValue || ""}`)));
	}, [propsValue]);
	const formatBankCardNumber = (value) => {
		return value.replace(/\D/g, "").replace(/(.{4})/g, "$1 ").trim();
	};
	const handleChange = (e) => {
		var _inputRef$current;
		const { value } = e.target;
		setCurrentBankType(require_utils.getCardType(value));
		const formattedValue = formatBankCardNumber(value);
		let start = ((_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || (_inputRef$current = _inputRef$current.input) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.selectionStart) || 0;
		const val = bankCardMaxLength(formattedValue);
		setValue(val);
		onChange === null || onChange === void 0 || onChange(val.replace(/\s/g, ""));
		if (formattedValue.length > 19 || formattedValue.length < _value.length) {
			if ([
				4,
				9,
				14,
				19
			].includes(start)) start = start + 1;
			setTimeout(() => {
				var _inputRef$current2;
				(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.setSelectionRange(start, start);
			});
		}
	};
	return /* @__PURE__ */ react.default.createElement(require_index.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, others), {}, {
		suffix: currentBankType ? /* @__PURE__ */ react.default.createElement("img", {
			className: "pisell-input-bank-card-suffix",
			src: require_utils.bankTypeMap[currentBankType],
			alt: currentBankType
		}) : /* @__PURE__ */ react.default.createElement("span", null),
		type: "tel",
		placeholder: "1234 1234 1234 1234",
		size: "large",
		ref: inputRef,
		value: _value,
		onChange: handleChange
	}));
};
//#endregion
exports.default = BankCard;
