import { api } from "@nice/client/";
import { Checkbox, Skeleton } from "antd";
import { TermDto } from "@nice/common";
import React from "react";
export default function TermParentSelector({
	value,
	onChange,
	className,
	taxonomyId,
	domainId = undefined,
	style,
}: {
	value?: string[];
	onChange?: (value: string[]) => void;
	className?: string;
	taxonomyId: string;
	domainId?: string;
	style?: React.CSSProperties;
}) {
	const { data, isLoading }: { data: TermDto[]; isLoading: boolean } =
		api.term.findMany.useQuery({
			where: {
				taxonomyId: taxonomyId,
				parentId: null,
				domainId,
			},
		});
	const handleCheckboxChange = (checkedValues: string[]) => {
		// setSelectedValues(checkedValues); // 更新选中的值
		if (onChange) {
			onChange(checkedValues); // 调用外部传入的 onChange 回调
		}
	};
	return (
		<div className={className} style={style}>
			{isLoading ? (
				<Skeleton
					paragraph={{
						rows: 4,
					}}></Skeleton>
			) : (
				<Checkbox.Group value={value} onChange={handleCheckboxChange}>
					{data?.map((category) => (
						<div className="w-full h-9 p-2 my-1" key={category.id}>
							<Checkbox
								className="text-base text-slate-700"
								value={category.id}>
								{category.name}
							</Checkbox>
						</div>
					))}
				</Checkbox.Group>
			)}
		</div>
	);
}