import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectWithoutProperties.js";
import useEngineContext from "../../../hooks/useEngineContext.js";
import locales_default from "../locales.js";
import { formatPhoneDisplay } from "./utils.js";
import React, { useCallback, useMemo } from "react";
import { Popover } from "antd";
import { locales } from "@pisell/utils";
import { Keyboard, PisellModal, VirtualInput } from "@pisell/materials";
import classNames from "classnames";
import { useControllableValue } from "ahooks";
import "./index.less";
//#region src/pro/keyboards/phoneKeyboard/index.tsx
const _excluded = [
	"renderType",
	"containerProps",
	"children"
], _excluded2 = ["open", "className"];
const generateSimpleUUID = () => {
	return Math.random().toString(36).substring(2) + Date.now().toString(36);
};
const normalizePhoneValue = (value) => `${value || ""}`.replace(/\D/g, "");
/**
* PhoneKeyboardBase - 手机号输入键盘基础组件
* 按国家区号格式化展示，实际回传值保持纯数字。
*/
const PhoneKeyboardBase = (props) => {
	var _context$engine;
	const { countryCallingCode = "61", placeholder = "", maxLength, disabled = false, doneText, clearText, label, formatSeparator = "space", style, className, keydown = true, inputStyle, inputWrapperStyle, onEnter } = props;
	const context = useEngineContext();
	locales.init(locales_default, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || "en");
	const [internalValue, setInternalValue] = useControllableValue(props, { defaultValue: "" });
	const uniqueKeyboardId = useMemo(() => {
		return `phone-keyboard-${generateSimpleUUID()}`;
	}, []);
	const handleValueChange = useCallback((newValue) => {
		setInternalValue(normalizePhoneValue(newValue));
	}, [setInternalValue]);
	const handleDelete = useCallback(() => {
		if (internalValue.length > 0) handleValueChange(internalValue.slice(0, -1));
	}, [internalValue, handleValueChange]);
	const handleClear = useCallback(() => {
		handleValueChange("");
	}, [handleValueChange]);
	const handleDone = useCallback(() => {
		onEnter === null || onEnter === void 0 || onEnter(internalValue);
	}, [internalValue, onEnter]);
	const handleNumberInput = useCallback((num) => {
		const newValue = internalValue + num;
		if (maxLength && newValue.length > maxLength) return;
		handleValueChange(newValue);
	}, [
		internalValue,
		maxLength,
		handleValueChange
	]);
	const handleKeyboardChange = useCallback((key) => {
		if (key === void 0) return;
		const keyStr = String(key);
		switch (keyStr) {
			case "delete":
			case "backspace":
				handleDelete();
				break;
			case "clear":
				handleClear();
				break;
			case "done":
			case "ok":
				handleDone();
				break;
			default:
				if (/^[0-9]$/.test(keyStr)) handleNumberInput(keyStr);
				break;
		}
	}, [
		handleDelete,
		handleClear,
		handleDone,
		handleNumberInput
	]);
	const phoneKeyboardItems = useMemo(() => {
		return [
			{
				value: 1,
				label: "1",
				disabled: false,
				type: "text"
			},
			{
				value: 2,
				label: "2",
				disabled: false,
				type: "text"
			},
			{
				value: 3,
				label: "3",
				disabled: false,
				type: "text"
			},
			{
				value: 4,
				label: "4",
				disabled: false,
				type: "text"
			},
			{
				value: 5,
				label: "5",
				disabled: false,
				type: "text"
			},
			{
				value: 6,
				label: "6",
				disabled: false,
				type: "text"
			},
			{
				value: 7,
				label: "7",
				disabled: false,
				type: "text"
			},
			{
				value: 8,
				label: "8",
				disabled: false,
				type: "text"
			},
			{
				value: 9,
				label: "9",
				disabled: false,
				type: "text"
			},
			{
				value: "clear",
				label: clearText || locales.getText("pisell2.keyboard.number-keybard.clear"),
				disabled: false,
				type: "text",
				style: {
					color: "#F04438",
					fontSize: 18
				}
			},
			{
				value: 0,
				label: "0",
				disabled: false,
				type: "text"
			},
			{
				value: "done",
				label: doneText || locales.getText("pisell2.keyboard.phone-keyboard.confirm"),
				disabled: false,
				type: "primary",
				style: { fontSize: 18 }
			}
		];
	}, [clearText, doneText]);
	const displayValue = useMemo(() => {
		return formatPhoneDisplay(internalValue, countryCallingCode, formatSeparator);
	}, [
		internalValue,
		countryCallingCode,
		formatSeparator
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-phone-keyboard", { "pisell-phone-keyboard--disabled": disabled }, className),
		style
	}, label && /* @__PURE__ */ React.createElement("div", { className: "pisell-phone-keyboard-label" }, label), /* @__PURE__ */ React.createElement("div", { className: classNames("pisell-phone-keyboard-input-wrapper") }, /* @__PURE__ */ React.createElement(VirtualInput, {
		focused: !disabled,
		value: displayValue,
		placeholder,
		wrapperStyle: _objectSpread2({
			flex: 1,
			padding: "19px 16px",
			borderRadius: "8px",
			backgroundColor: "white",
			boxShadow: "0px 1px 2px rgba(16, 24, 40, 0.06)",
			overflow: "hidden"
		}, inputWrapperStyle),
		style: _objectSpread2({
			fontSize: "48px",
			fontWeight: "bold",
			border: "none",
			background: "transparent",
			width: "100%"
		}, inputStyle),
		preventBlurElements: [`#${uniqueKeyboardId}`],
		textAlign: "center",
		allowClear: true,
		onClear: handleDelete
	})), /* @__PURE__ */ React.createElement(Keyboard, {
		id: uniqueKeyboardId,
		className: "pisell-phone-keyboard-keys",
		items: phoneKeyboardItems,
		keydown,
		onChange: handleKeyboardChange
	}));
};
/**
* PhoneKeyboard - 手机号输入键盘
* 支持基础形式展示、popover 形态或 modal 形态
*/
const PhoneKeyboard = (props) => {
	const { renderType, containerProps, children } = props, keyboardProps = _objectWithoutProperties(props, _excluded);
	const _ref = containerProps || {}, { open, className } = _ref, restProps = _objectWithoutProperties(_ref, _excluded2);
	if (renderType === "popover") return /* @__PURE__ */ React.createElement(Popover, _objectSpread2(_objectSpread2({
		key: `${open}`,
		open,
		trigger: ["click"],
		overlayClassName: classNames("pisell-phone-keyboard-popover", className),
		destroyTooltipOnHide: true,
		overlayInnerStyle: { padding: 0 },
		arrow: false
	}, restProps), {}, { content: /* @__PURE__ */ React.createElement(PhoneKeyboardBase, keyboardProps) }), children);
	if (renderType === "modal") return open ? /* @__PURE__ */ React.createElement(PisellModal, _objectSpread2({
		platform: "pc",
		open: true,
		width: "unset",
		header: null,
		footer: false,
		mask: false,
		maskClosable: true,
		bodyStyle: {
			padding: "0px",
			backgroundColor: "transparent"
		},
		closeIcon: null,
		className: classNames("pisell-phone-keyboard-modal", className),
		destroyOnClose: true
	}, restProps), /* @__PURE__ */ React.createElement(PhoneKeyboardBase, keyboardProps)) : null;
	return /* @__PURE__ */ React.createElement(PhoneKeyboardBase, keyboardProps);
};
//#endregion
export { PhoneKeyboard as default };
