import { formatPhone } from "../utils/phoneFormatter.js";
import { getCountryCodes, getMaxLength } from "../utils/countryCodeHelper.js";
import React, { useMemo, useState } from "react";
import { useTextInputState } from "@pisell/utils";
import { Input, Select, Space } from "antd";
//#region src/components/pisellPhone/components/EditView.tsx
/**
* PisellPhone 编辑态视图组件
*
* 负责渲染编辑态的电话号码输入，包含国家码选择器和号码输入框
*
* 功能：
* - 国家码选择器（下拉，支持搜索）
* - 电话号码输入（只保留数字）
* - 自动格式化（根据国家码）
* - 动态设置最大长度（根据国家码）
* - 实时或失焦校验
* - 错误提示展示
*
* @param props 组件 Props
*/
const EditView = (props) => {
	const [countryCode, setCountryCode] = useState(props.countryCode || props.defaultCountryCode || "+86");
	const countryCodes = useMemo(() => getCountryCodes(props), [props]);
	const { value, isValid, errors, handleChange, handleBlur, handleFocus } = useTextInputState(props);
	const handlePhoneChange = (e) => {
		const cleaned = e.target.value.replace(/\D/g, "");
		if (props.autoFormat !== false) handleChange(formatPhone(cleaned, countryCode));
		else handleChange(cleaned);
	};
	const handleCountryCodeChange = (code) => {
		var _props$onCountryCodeC;
		setCountryCode(code);
		(_props$onCountryCodeC = props.onCountryCodeChange) === null || _props$onCountryCodeC === void 0 || _props$onCountryCodeC.call(props, code);
	};
	const maxDigitLen = getMaxLength(countryCode, countryCodes);
	const maxInputLength = useMemo(() => {
		if (props.maxLength != null) return props.maxLength;
		if (props.autoFormat === false) return maxDigitLen;
		return formatPhone("9".repeat(maxDigitLen), countryCode).length;
	}, [
		countryCode,
		maxDigitLen,
		props.maxLength,
		props.autoFormat
	]);
	return /* @__PURE__ */ React.createElement("div", { className: "pisell-phone-edit" }, /* @__PURE__ */ React.createElement(Input, {
		prefix: countryCode ? /* @__PURE__ */ React.createElement("span", { className: "pisell-phone-prefix" }, countryCode) : void 0,
		value,
		onChange: handlePhoneChange,
		addonBefore: props.showCountrySelector !== false ? /* @__PURE__ */ React.createElement(Select, {
			value: countryCode,
			onChange: handleCountryCodeChange,
			showSearch: true,
			optionFilterProp: "children",
			filterOption: (input, option) => {
				const code = option === null || option === void 0 ? void 0 : option.value;
				const country = countryCodes.find((c) => c.code === code);
				if (!country) return false;
				const search = input.trim().toLowerCase();
				if (!search) return true;
				return country.name.toLowerCase().includes(search) || country.code.toLowerCase().includes(search) || country.flag.toLowerCase().includes(search);
			},
			className: "pisell-phone-country-select",
			optionLabelProp: "label",
			popupMatchSelectWidth: false,
			dropdownStyle: { minWidth: 200 }
		}, countryCodes.map((country, index) => /* @__PURE__ */ React.createElement(Select.Option, {
			key: `${country.code}-${country.name}-${index}`,
			value: country.code,
			label: country.flag
		}, /* @__PURE__ */ React.createElement(Space, { size: 4 }, /* @__PURE__ */ React.createElement("span", null, country.flag), /* @__PURE__ */ React.createElement("span", null, country.code))))) : null,
		onBlur: handleBlur,
		onFocus: handleFocus,
		placeholder: props.placeholder || "请输入电话号码",
		maxLength: maxInputLength,
		allowClear: props.allowClear,
		disabled: props.disabled,
		autoFocus: props.autoFocus,
		status: isValid ? void 0 : "error",
		className: props.className,
		style: props.style,
		"aria-label": props["aria-label"],
		"aria-describedby": props["aria-describedby"]
	}), !isValid && errors.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "pisell-phone-error" }, errors[0]));
};
//#endregion
export { EditView as default };
