import React, { useMemo } from "react";
import classNames from "classnames";
import "./Tabs.less";
//#region src/components/dataSourceComponents/fields/Tabs/Tabs.tsx
/**
* Tabs 胶囊风格选项卡组件
*
* @description 提供类似 Segmented 控件的胶囊风格选项卡，支持受控与非受控模式。
* 用于表单中替代 Radio.Group，展示更为直观的标签页切换交互。
*
* @example
* ```tsx
* <Tabs
*   value={current}
*   options={[
*     { label: '校区', value: 'campus' },
*     { label: '场地', value: 'venue' },
*   ]}
*   onChange={(val) => setCurrent(val)}
* />
* ```
*/
const Tabs = ({ value, defaultValue, options = [], disabled = false, onChange, className, style }) => {
	/** 内部选中值，支持受控与非受控 */
	const [internalValue, setInternalValue] = React.useState(defaultValue);
	/** 最终使用的选中值：受控优先 */
	const selectedValue = value !== void 0 ? value : internalValue;
	/**
	* 处理选项点击
	*/
	const handleSelect = (option) => {
		if (disabled || option.disabled) return;
		const newValue = option.value;
		if (value === void 0) setInternalValue(newValue);
		onChange === null || onChange === void 0 || onChange(newValue);
	};
	const tabItems = useMemo(() => {
		return options.map((option) => {
			const isActive = selectedValue != null && selectedValue !== void 0 && String(selectedValue) === String(option.value);
			const isDisabled = disabled || option.disabled;
			return /* @__PURE__ */ React.createElement("div", {
				key: option.value,
				className: classNames("pisell-form-tabs-item", {
					"pisell-form-tabs-item--active": isActive,
					"pisell-form-tabs-item--disabled": isDisabled
				}),
				onClick: () => handleSelect(option),
				role: "tab",
				"aria-selected": isActive,
				"aria-disabled": isDisabled,
				tabIndex: isDisabled ? -1 : 0,
				onKeyDown: (e) => {
					if (e.key === "Enter" || e.key === " ") {
						e.preventDefault();
						handleSelect(option);
					}
				}
			}, /* @__PURE__ */ React.createElement("span", { className: "pisell-form-tabs-item-label" }, option.label));
		});
	}, [
		options,
		selectedValue,
		disabled
	]);
	return /* @__PURE__ */ React.createElement("div", {
		className: classNames("pisell-form-tabs", className),
		style,
		role: "tablist"
	}, tabItems);
};
//#endregion
export { Tabs as default };
