import { getLocale } from "../../utils/locales.js";
import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import useEngineContext from "../../hooks/useEngineContext.js";
import CustomerCard from "./CustomerCard/index.js";
import RightPanel from "./RightPanel/index.js";
import locales_default from "./locales.js";
import React, { useEffect, useMemo, useState } from "react";
import { Popover } from "antd";
import { locales } from "@pisell/utils";
import { VirtualKeyboard } from "@pisell/materials";
import "./index.less";
//#region src/components/pisellSelectCustomerModal/index.tsx
const items = [
	{
		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: "+",
		label: "+",
		disabled: false,
		type: "text"
	},
	{
		value: "0",
		label: "0",
		disabled: false,
		type: "text"
	},
	{
		value: "reset",
		label: "Reset",
		disabled: false,
		type: "text"
	}
];
const PisellSelectCustomerModal = (props) => {
	const { onChange, value, popoverProps, virtualKeyboardProps, keyboardProps, virtualKeyInputProps, cardProps } = props;
	const [open, setOpen] = useState(false);
	const [_value, set_value] = useState();
	const [phone, setPhone] = useState("");
	useEngineContext();
	locales.init(locales_default, getLocale());
	useEffect(() => {
		set_value(value);
	}, [value]);
	/**
	* @title: 返回逻辑
	* @description:
	* @param {any} e
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-11-02 09:30
	*/
	const _onChange = (e) => {
		set_value(e);
		onChange === null || onChange === void 0 || onChange(e);
		setOpen(false);
	};
	const onOpenChange = (e) => {
		setOpen(e);
	};
	useEffect(() => {
		if (open) document.body.classList.add("hide-scroll");
		else setTimeout(() => {
			document.body.classList.remove("hide-scroll");
		}, 150);
	}, [open]);
	useEffect(() => {
		document.body.id = "body";
	}, []);
	const adjustFontSize = useMemo(() => {
		if (!phone) return 30;
		const maxFontSize = 60;
		const minFontSize = 10;
		const defaultFontSize = maxFontSize;
		const inputWidth = 248;
		const span = document.createElement("span");
		span.style.position = "absolute";
		span.style.whiteSpace = "nowrap";
		span.style.visibility = "hidden";
		span.style.fontSize = `${defaultFontSize}px`;
		span.textContent = phone;
		document.body.appendChild(span);
		let fontSize = maxFontSize;
		while (span.offsetWidth > inputWidth && fontSize > minFontSize) {
			fontSize -= .5;
			span.style.fontSize = `${fontSize}px`;
		}
		document.body.removeChild(span);
		return fontSize;
	}, [phone]);
	return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Popover, _objectSpread2({
		content: /* @__PURE__ */ React.createElement(VirtualKeyboard, _objectSpread2({
			style: { zoom: .8 },
			keyboardProps: _objectSpread2({
				keydown: false,
				items,
				onChange: (e) => {
					if (e === "reset") {
						setPhone("");
						return;
					}
					setPhone(phone + String(e));
				}
			}, keyboardProps),
			virtualKeyInputProps: _objectSpread2({
				value: phone,
				onChange: (e) => {
					setPhone(e.target.value);
				},
				placeholder: locales.getText("pisell2.text.search-customer-by-phone-number"),
				style: {
					textAlign: "left",
					fontSize: adjustFontSize
				},
				className: "pisell-select-customer-modal-input"
			}, virtualKeyInputProps),
			rightPanel: /* @__PURE__ */ React.createElement(RightPanel, {
				value: _value,
				phone,
				onChange: _onChange
			})
		}, virtualKeyboardProps)),
		open,
		placement: "bottom",
		arrow: false,
		onOpenChange,
		trigger: ["click"]
	}, popoverProps), /* @__PURE__ */ React.createElement(CustomerCard, _objectSpread2({
		onClickItem: () => {
			setOpen(true);
		},
		customer: _value,
		onRemove: _onChange
	}, cardProps))));
};
//#endregion
export { PisellSelectCustomerModal as default };
