import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import withResponsive from "../../../../responsive/withResponsive.js";
import PhoneKeyboard from "../../../../pro/keyboards/phoneKeyboard/index.js";
import { getCountries } from "./serve.js";
import React, { useEffect, useState } from "react";
import { Input, Select, Space } from "antd";
import { useRequest } from "ahooks";
//#region src/plus/clinetSearch/Add/PhoneField/index.tsx
const defaultValue = {
	code: "+61",
	phone: ""
};
const Compact = Space.Compact;
const PhoneField = ({ value, onChange, variant }) => {
	const [keyboardOpen, setKeyboardOpen] = useState(false);
	const codes = useRequest(getCountries, { manual: true });
	const currentValue = _objectSpread2(_objectSpread2({}, defaultValue), value);
	const isPhoneVariant = variant === "phone";
	useEffect(() => {
		codes.run();
	}, []);
	const _onChange = (key, val) => {
		onChange(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultValue), value), {}, { [key]: val }));
	};
	const phoneInput = /* @__PURE__ */ React.createElement(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.createElement(Compact, { style: { width: "100%" } }, /* @__PURE__ */ React.createElement(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.createElement(React.Fragment, null, phoneInput, /* @__PURE__ */ React.createElement(PhoneKeyboard, _objectSpread2(_objectSpread2({}, keyboardProps), {}, {
		renderType: "modal",
		containerProps: {
			open: keyboardOpen,
			onCancel: () => setKeyboardOpen(false)
		}
	}))) : /* @__PURE__ */ React.createElement(PhoneKeyboard, _objectSpread2(_objectSpread2({}, keyboardProps), {}, {
		renderType: "popover",
		containerProps: {
			open: keyboardOpen,
			onOpenChange: setKeyboardOpen
		}
	}), phoneInput));
};
PhoneField.displayName = "PhoneField";
var PhoneField_default = withResponsive(PhoneField);
//#endregion
export { PhoneField_default as default };
