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 usePisellConfig from "../pisell-config-provider/hooks/usePisellConfig.js";
import PisellRow from "../pisellRow/index.js";
import { mockList } from "./mock.js";
import React, { useEffect, useMemo, useState } from "react";
import { changeArray, isNumber } from "@pisell/utils";
import { Checkbox, Radio } from "antd";
import classNames from "classnames";
import { useDebounceFn } from "ahooks";
import "./index.less";
//#region src/components/pisellCheckboxGroup/index.tsx
const _excluded = [
	"platform",
	"gap",
	"style",
	"options",
	"onChange",
	"value",
	"renderOption",
	"padding",
	"rowKey",
	"mode",
	"direction",
	"fullWidth",
	"iconPosition",
	"optionClassName",
	"optionActiveClassName",
	"onChangeDebounce",
	"onItemClick",
	"showActiveBackground"
];
/**
* @title: PisellCheckboxGroup
* @description: 选中组件
* @param {PisellCheckboxGroupProps} props
* @return {*}
* @Author: zhiwei.Wang
* @Date: 2024-08-16 10:34
*/
const PisellCheckboxGroup = (props) => {
	usePisellConfig();
	const { platform, gap = 10, style, options = mockList, onChange, value, renderOption = (option) => {
		return option.label;
	}, padding = 0, rowKey = "value", mode = "multiple", direction, fullWidth, iconPosition = "left", optionClassName, optionActiveClassName, onChangeDebounce, onItemClick, showActiveBackground = false } = props, rest = _objectWithoutProperties(props, _excluded);
	const [_value, set_value] = useState([]);
	useEffect(() => {
		initValue();
	}, [value]);
	/**
	* @title: 转换value到内部
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:45
	*/
	const initValue = () => {
		let _val = value;
		if (!value) _val = [];
		else if (!Array.isArray(value)) _val = [value];
		set_value(_val);
	};
	const _style = useMemo(() => {
		let obj = {
			gap: isNumber(gap) ? gap + "px" : gap,
			padding: isNumber(padding) ? padding + "px" : padding
		};
		if ("horizontal" === direction) obj = _objectSpread2(_objectSpread2({}, obj), {}, {
			flexDirection: "row",
			overflowX: "auto"
		});
		return _objectSpread2(_objectSpread2({}, obj), style);
	}, [
		style,
		gap,
		padding,
		direction
	]);
	const rowStyle = useMemo(() => {
		if ("horizontal" === direction) {
			if (false === fullWidth) return {
				flexShrink: 0,
				width: "auto"
			};
			return { flexShrink: 0 };
		}
		return {};
	}, [direction, fullWidth]);
	/**
	* @title: 统一外部onChange
	* @description:
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-08-16 10:35
	*/
	const _onChange = (val, item) => {
		onChange === null || onChange === void 0 || onChange(mode === "single" ? val[0] : val, item);
	};
	const { run } = useDebounceFn((key, item) => {
		handleSelectItem(key, item);
	}, {
		wait: 400,
		leading: true,
		trailing: false
	});
	/**
	* @title: 选择
	* @description:
	* @param {any} item
	* @return {*}
	* @Author: zhiwei.Wang
	* @Date: 2024-01-30 16:46
	*/
	const handleSelectItem = (key, item) => {
		let newVal = [key];
		if (mode === "multiple") newVal = changeArray(_value, key, "this");
		_onChange(newVal, item);
		set_value(newVal);
	};
	const CheckBoxItem = mode === "multiple" ? Checkbox : Radio;
	return /* @__PURE__ */ React.createElement("div", _objectSpread2(_objectSpread2({}, rest), {}, {
		className: classNames("pisell-checkbox-group", rest.className),
		style: _style
	}), options.map((option, index) => {
		const active = _value.includes(option[rowKey]);
		return /* @__PURE__ */ React.createElement(PisellRow, {
			className: classNames("pisell-checkbox-group-item", optionClassName, {
				"pisell-checkbox-group-item-active": active,
				"pisell-checkbox-group-item-with-background": active && showActiveBackground,
				[optionActiveClassName]: active,
				"pisell-checkbox-group-item-error": option.error
			}),
			key: option[rowKey],
			gap: 10,
			style: rowStyle,
			onClick: (e) => {
				onItemClick === null || onItemClick === void 0 || onItemClick(e, option);
				if (option.disabled) return;
				if (onChangeDebounce) {
					run(option[rowKey], option);
					return;
				}
				handleSelectItem(option[rowKey], option);
			},
			leftContent: iconPosition === "left" && /* @__PURE__ */ React.createElement(CheckBoxItem, {
				checked: active,
				className: "pisell-checkbox-group-item-checkbox"
			}),
			rightContent: iconPosition === "right" && /* @__PURE__ */ React.createElement(CheckBoxItem, {
				checked: active,
				className: "pisell-checkbox-group-item-checkbox"
			}),
			centerContent: renderOption === null || renderOption === void 0 ? void 0 : renderOption(option, active, index),
			centerContentFill: true
		});
	}));
};
//#endregion
export { PisellCheckboxGroup as default };
