const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
const require_objectSpread2 = require("../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
const require_withResponsive = require("../../../../responsive/withResponsive.js");
const require_index = require("../../../../pro/keyboards/phoneKeyboard/index.js");
const require_serve = require("./serve.js");
let react = require("react");
react = require_runtime.__toESM(react);
let antd = require("antd");
let ahooks = require("ahooks");
//#region src/plus/clinetSearch/Add/PhoneField/index.tsx
const defaultValue = {
	code: "+61",
	phone: ""
};
const Compact = antd.Space.Compact;
const PhoneField = ({ value, onChange, variant }) => {
	const [keyboardOpen, setKeyboardOpen] = (0, react.useState)(false);
	const codes = (0, ahooks.useRequest)(require_serve.getCountries, { manual: true });
	const currentValue = require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultValue), value);
	const isPhoneVariant = variant === "phone";
	(0, react.useEffect)(() => {
		codes.run();
	}, []);
	const _onChange = (key, val) => {
		onChange(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, defaultValue), value), {}, { [key]: val }));
	};
	const phoneInput = /* @__PURE__ */ react.default.createElement(antd.Input, {
		readOnly: true,
		size: "large",
		value: currentValue.phone || "",
		onClick: () => setKeyboardOpen(true),
		style: {
			width: "100%",
			borderRadius: "0 8px 8px 0"
		}
	});
	const keyboardProps = {
		value: currentValue.phone || "",
		countryCallingCode: currentValue.code,
		onChange: (phone) => {
			_onChange("phone", phone);
		},
		onEnter: (phone) => {
			_onChange("phone", phone);
			setKeyboardOpen(false);
		},
		formatSeparator: "dash"
	};
	return /* @__PURE__ */ react.default.createElement(Compact, { style: { width: "100%" } }, /* @__PURE__ */ react.default.createElement(antd.Select, {
		options: codes.data || [],
		onChange: (val) => {
			_onChange("code", val);
		},
		size: "large",
		style: variant === "phone" ? { flex: "0 0 50px" } : { flex: "0 0 100px" },
		loading: codes.loading,
		optionLabelProp: "value",
		value: currentValue.code,
		dropdownMatchSelectWidth: false
	}), isPhoneVariant ? /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, phoneInput, /* @__PURE__ */ react.default.createElement(require_index.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, keyboardProps), {}, {
		renderType: "modal",
		containerProps: {
			open: keyboardOpen,
			onCancel: () => setKeyboardOpen(false)
		}
	}))) : /* @__PURE__ */ react.default.createElement(require_index.default, require_objectSpread2._objectSpread2(require_objectSpread2._objectSpread2({}, keyboardProps), {}, {
		renderType: "popover",
		containerProps: {
			open: keyboardOpen,
			onOpenChange: setKeyboardOpen
		}
	}), phoneInput));
};
PhoneField.displayName = "PhoneField";
var PhoneField_default = require_withResponsive.default(PhoneField);
//#endregion
exports.default = PhoneField_default;
