import { Divider } from "antd";
import { api } from "@nice/client";
import { useMainContext } from "../MainProvider";
import TermParentSelector from "@web/src/components/models/term/term-parent-selector";
import SearchModeRadio from "./SearchModeRadio";
export default function FilterSection() {
	const { data: taxonomies } = api.taxonomy.getAll.useQuery({});
	const { selectedTerms, setSelectedTerms, showSearchMode } =
		useMainContext();
	const handleTermChange = (slug: string, selected: string[]) => {
		setSelectedTerms({
			...selectedTerms,
			[slug]: selected, // 更新对应 slug 的选择
		});
	};
	return (
		<div className=" flex z-0 p-6 flex-col  mt-4   space-y-6   overscroll-contain overflow-x-hidden">
			{showSearchMode && <SearchModeRadio></SearchModeRadio>}
			{taxonomies?.map((tax, index) => {
				const items = Object.entries(selectedTerms).find(
					([key, items]) => key === tax.slug
				)?.[1];
				return (
					<div key={index}>
						<h3 className="text-lg font-medium mb-4">
							{tax?.name}
							{/* {JSON.stringify(items)} */}
						</h3>
						<TermParentSelector
							value={items}
							// slug={tax?.slug}
							className="w-70 max-h-[400px] overscroll-contain overflow-x-hidden"
							onChange={(selected) =>
								handleTermChange(
									tax?.slug,
									selected as string[]
								)
							}
							taxonomyId={tax?.id}></TermParentSelector>
						<Divider></Divider>
					</div>
				);
			})}
		</div>
	);
}
