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 useThemeTokens from "../../hooks/useThemeTokens.js";
import NumericStepper from "../NumericStepper/index.js";
import locales_default from "./locales.js";
import Indicator from "./components/Indicator/index.js";
import LayoutContainer from "./components/LayoutContainer/index.js";
import useSelectionController from "./hooks/useSelectionController.js";
import usePresetProps from "./hooks/usePresetProps.js";
import Item from "./Item.js";
import React, { forwardRef, useEffect, useImperativeHandle } from "react";
import { Select, Tag } from "antd";
import { locales } from "@pisell/utils";
import classNames from "classnames";
import { CheckCircleOutlined, ExclamationCircleOutlined } from "@ant-design/icons";
import "./selector.less";
//#region src/pro/Selector/Selector.tsx
const _excluded = ["show", "render"], _excluded2 = [
	"disabled",
	"size",
	"style"
];
const ATag = Tag;
const SelectorContext = React.createContext({
	disabled: false,
	mode: "single",
	itemLayout: "horizontal",
	valueType: "primitive",
	variant: "default",
	itemProps: {},
	preset: {}
});
const Selector = forwardRef((props, ref) => {
	var _context$appHelper;
	const { disabled, fieldNames, layout, indicatorProps, itemProps, itemLayout = "horizontal", mode = "single", preset = {}, renderItem, ruleConfig, valueType = "primitive", variant = "default" } = props;
	const { colorPrimary, colorPrimaryBg } = useThemeTokens(props.theme);
	const context = useEngineContext();
	locales.init(locales_default, (context === null || context === void 0 || (_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.utils) === null || _context$appHelper === void 0 || (_context$appHelper = _context$appHelper.storage) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.get("umi_locale")) || "en");
	const { state, actions } = useSelectionController(props);
	const { options, errors, validated, quantityInfo } = state;
	const { showQuantity, remainingCount } = quantityInfo;
	const headerProps = props.headerProps || props.titleProps || {};
	const presetConfig = usePresetProps({
		mode,
		preset,
		itemLayout,
		variant,
		layout,
		indicatorProps
	});
	const finalLayout = presetConfig.layout;
	const finalIndicatorProps = presetConfig.indicatorProps;
	useImperativeHandle(ref, () => ({
		validate: actions.validate,
		reset: actions.reset,
		clear: actions.clear,
		getErrors: () => {
			return errors || [];
		}
	}));
	useEffect(() => {
		document.body.id = "body";
	}, [actions]);
	const renderIndicator = (option, isDefault) => {
		const _ref = finalIndicatorProps || {}, { show = true, render } = _ref, rest = _objectWithoutProperties(_ref, _excluded);
		if ((finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.show) === false) return null;
		if (React.isValidElement(finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render)) return finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render;
		if (typeof (finalIndicatorProps === null || finalIndicatorProps === void 0 ? void 0 : finalIndicatorProps.render) === "function") {
			var _finalIndicatorProps$;
			return finalIndicatorProps === null || finalIndicatorProps === void 0 || (_finalIndicatorProps$ = finalIndicatorProps.render) === null || _finalIndicatorProps$ === void 0 ? void 0 : _finalIndicatorProps$.call(finalIndicatorProps, _objectSpread2({
				option,
				selected: option.selected,
				disabled: disabled || option.disabled,
				actions
			}, rest));
		}
		return /* @__PURE__ */ React.createElement(Indicator, _objectSpread2(_objectSpread2({}, rest), {}, {
			mode,
			checked: option.selected,
			disabled: disabled || option.disabled,
			onChange: (e) => {
				if (e.target.checked) actions.update(option._key, { quantity: 1 });
				else actions.update(option._key, { quantity: 0 });
			},
			children: isDefault ? option._label : void 0
		}));
	};
	const renderQuantitySelector = (option) => {
		if (valueType === "primitive") return null;
		if (props.showStepper === false) return null;
		if ((props.showStepper === "auto" || props.showStepper === void 0) && !showQuantity) return null;
		return /* @__PURE__ */ React.createElement(NumericStepper, _objectSpread2(_objectSpread2({}, props.stepperProps || {}), {}, {
			min: option.effectiveMin,
			max: option.effectiveMax,
			value: option.quantity,
			disabled: disabled || option.disabled,
			onChange: (value) => {
				actions.update(option._key, { quantity: value });
			}
		}));
	};
	const renderOption = (option) => {
		var _option$ruleConfig$mi, _option$ruleConfig, _ruleConfig$min, _option$ruleConfig$ma, _option$ruleConfig2;
		const optionItemValue = Array.isArray(state.values) ? state.values.find((item) => (item === null || item === void 0 ? void 0 : item.value) === option._key) : [state.values].find((item) => (item === null || item === void 0 ? void 0 : item.value) === option._key);
		if (React.isValidElement(renderItem)) return renderItem;
		const configMin = (_option$ruleConfig$mi = option === null || option === void 0 || (_option$ruleConfig = option.ruleConfig) === null || _option$ruleConfig === void 0 ? void 0 : _option$ruleConfig.min) !== null && _option$ruleConfig$mi !== void 0 ? _option$ruleConfig$mi : 0;
		const groupMin = (_ruleConfig$min = ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min) !== null && _ruleConfig$min !== void 0 ? _ruleConfig$min : 0;
		const effectiveMin = options.length < 2 && groupMin > 0 ? groupMin : configMin;
		const configMax = (_option$ruleConfig$ma = option === null || option === void 0 || (_option$ruleConfig2 = option.ruleConfig) === null || _option$ruleConfig2 === void 0 ? void 0 : _option$ruleConfig2.max) !== null && _option$ruleConfig$ma !== void 0 ? _option$ruleConfig$ma : Number.MAX_SAFE_INTEGER;
		const effectiveMax = remainingCount !== void 0 ? Math.min(remainingCount + (option.quantity || 0), configMax) : configMax;
		option.effectiveMin = effectiveMin;
		option.effectiveMax = effectiveMax;
		if (typeof renderItem === "function") return renderItem({
			dataSource: option,
			actions,
			optionItemValue,
			indicator: renderIndicator(option),
			numberSelector: renderQuantitySelector(option),
			values: state.values,
			quantityInfo
		});
		const numberSelector = renderQuantitySelector(option);
		const indicator = renderIndicator(option);
		return /* @__PURE__ */ React.createElement(Item, {
			key: option._key,
			dataSource: option,
			actions,
			indicator,
			numberSelector,
			optionItemValue,
			quantityInfo,
			values: state.values
		});
	};
	const renderOptions = () => {
		if (variant === "select") {
			const _value = state.values;
			const _maxCount = ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max;
			const _ref2 = props.selectProps || {}, { disabled: selectDisabled, size = "large", style } = _ref2, rest = _objectWithoutProperties(_ref2, _excluded2);
			return /* @__PURE__ */ React.createElement(Select, _objectSpread2(_objectSpread2({}, rest), {}, {
				size,
				disabled: selectDisabled || disabled,
				style: style || { width: "100%" },
				mode: mode === "multiple" ? "multiple" : void 0,
				options,
				fieldNames,
				value: _value,
				onChange: (value) => actions.setValue(value),
				maxCount: _maxCount
			}));
		}
		return /* @__PURE__ */ React.createElement(LayoutContainer, {
			className: "pisell-pro-selector_options-container",
			config: finalLayout
		}, options.map(renderOption));
	};
	const renderRequiredTag = () => {
		const { required = false } = ruleConfig || {};
		if (!required) return null;
		const style = { borderRadius: 16 };
		if (errors.find((item) => item.type === "required" || item.type === "min")) return /* @__PURE__ */ React.createElement(ATag, {
			icon: /* @__PURE__ */ React.createElement(ExclamationCircleOutlined, null),
			color: "error",
			style
		}, locales.getText("pisell2.pro.selector.required-tag"));
		if (validated) return /* @__PURE__ */ React.createElement(ATag, {
			icon: /* @__PURE__ */ React.createElement(CheckCircleOutlined, null),
			color: "success",
			style
		}, locales.getText("pisell2.pro.selector.required-tag"));
		return /* @__PURE__ */ React.createElement(ATag, { style }, locales.getText("pisell2.pro.selector.required-tag"));
	};
	const renderTip = () => {
		var _headerProps$tip2, _headerProps$tip3, _headerProps$tip4;
		if (Array.isArray(errors) && errors.length) {
			var _headerProps$tip;
			const error = errors[errors.length - 1];
			return /* @__PURE__ */ React.createElement("span", {
				className: "pisell-pro-selector_tip",
				style: _objectSpread2(_objectSpread2({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip = headerProps.tip) === null || _headerProps$tip === void 0 ? void 0 : _headerProps$tip.style) || {}), {}, { color: "#D92D20" })
			}, error === null || error === void 0 ? void 0 : error.message);
		}
		if ((headerProps === null || headerProps === void 0 || (_headerProps$tip2 = headerProps.tip) === null || _headerProps$tip2 === void 0 ? void 0 : _headerProps$tip2.visible) === false) return null;
		let text = headerProps === null || headerProps === void 0 || (_headerProps$tip3 = headerProps.tip) === null || _headerProps$tip3 === void 0 ? void 0 : _headerProps$tip3.text;
		if ((ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min) || (ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max)) text = locales.getText("pisell2.pro.selector.tip.min-max-selection")(ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.min, ruleConfig === null || ruleConfig === void 0 ? void 0 : ruleConfig.max);
		if (!text) if (mode === "multiple") text = locales.getText("pisell2.pro.selector.mode.multiple");
		else text = locales.getText("pisell2.pro.selector.tip.require-one-option");
		if (!text) return null;
		return /* @__PURE__ */ React.createElement("span", {
			className: "pisell-pro-selector_tip",
			style: _objectSpread2({}, (headerProps === null || headerProps === void 0 || (_headerProps$tip4 = headerProps.tip) === null || _headerProps$tip4 === void 0 ? void 0 : _headerProps$tip4.style) || {})
		}, "(", text, ")");
	};
	const renderHeader = () => {
		var _headerProps$icon, _headerProps$icon2, _headerProps$icon3, _headerProps$icon4, _headerProps$title, _headerProps$title2, _headerProps$title3, _headerProps$title$te, _headerProps$title4;
		if ((headerProps === null || headerProps === void 0 ? void 0 : headerProps.visible) === false) return null;
		const _extraContent = (headerProps === null || headerProps === void 0 ? void 0 : headerProps.renderExtra) ? headerProps === null || headerProps === void 0 ? void 0 : headerProps.renderExtra({
			dataSource: options,
			values: state.values
		}) : null;
		return /* @__PURE__ */ React.createElement("div", {
			className: "pisell-pro-selector_header",
			style: _objectSpread2({}, (headerProps === null || headerProps === void 0 ? void 0 : headerProps.style) || {})
		}, /* @__PURE__ */ React.createElement("div", { className: "pisell-pro-selector_header-content-wrapper" }, /* @__PURE__ */ React.createElement("div", {
			className: "pisell-pro-selector_header-content",
			style: {
				display: "flex",
				alignItems: "center",
				gap: 8,
				flex: 1
			}
		}, (headerProps === null || headerProps === void 0 || (_headerProps$icon = headerProps.icon) === null || _headerProps$icon === void 0 ? void 0 : _headerProps$icon.visible) === false || !(headerProps === null || headerProps === void 0 || (_headerProps$icon2 = headerProps.icon) === null || _headerProps$icon2 === void 0 ? void 0 : _headerProps$icon2.icon) ? null : /* @__PURE__ */ React.createElement("span", { style: headerProps === null || headerProps === void 0 || (_headerProps$icon3 = headerProps.icon) === null || _headerProps$icon3 === void 0 ? void 0 : _headerProps$icon3.style }, headerProps === null || headerProps === void 0 || (_headerProps$icon4 = headerProps.icon) === null || _headerProps$icon4 === void 0 ? void 0 : _headerProps$icon4.icon), (headerProps === null || headerProps === void 0 || (_headerProps$title = headerProps.title) === null || _headerProps$title === void 0 ? void 0 : _headerProps$title.visible) === false || !(headerProps === null || headerProps === void 0 || (_headerProps$title2 = headerProps.title) === null || _headerProps$title2 === void 0 ? void 0 : _headerProps$title2.text) && !props.title ? null : /* @__PURE__ */ React.createElement("span", {
			className: "pisell-pro-selector_header-content-title",
			style: _objectSpread2({}, (headerProps === null || headerProps === void 0 || (_headerProps$title3 = headerProps.title) === null || _headerProps$title3 === void 0 ? void 0 : _headerProps$title3.style) || {})
		}, (_headerProps$title$te = headerProps === null || headerProps === void 0 || (_headerProps$title4 = headerProps.title) === null || _headerProps$title4 === void 0 ? void 0 : _headerProps$title4.text) !== null && _headerProps$title$te !== void 0 ? _headerProps$title$te : props.title), renderRequiredTag()), renderTip()), _extraContent);
	};
	return /* @__PURE__ */ React.createElement("div", {
		id: `pisell-pro-selector-${props.id}`,
		className: classNames("pisell-pro-selector", props.className),
		style: _objectSpread2(_objectSpread2({}, props.style || {}), {}, {
			["--color-primary"]: colorPrimary,
			["--color-primary-bg"]: colorPrimaryBg
		})
	}, renderHeader(), /* @__PURE__ */ React.createElement(SelectorContext.Provider, { value: {
		mode,
		disabled,
		valueType,
		variant,
		itemLayout,
		itemProps,
		preset
	} }, renderOptions()));
});
//#endregion
export { SelectorContext, Selector as default };
