import { Settings2 } from 'lucide-react';
import { Button, Checkbox, Dropdown } from 'antd';
import type { MenuProps } from 'antd';
import { type ColumnDef, isGroup } from './tableTypes';

interface Props<T> {
	defs: ColumnDef<T>[];
	visibleKeys: Extract<keyof T, string>[];
	onChange: (keys: Extract<keyof T, string>[]) => void;
}
export function ColumnSettings<T>({ defs, visibleKeys, onChange }: Props<T>) {
	const toggle = (key: Extract<keyof T, string>, checked: boolean) => {
		onChange(checked ? [...visibleKeys, key] : visibleKeys.filter((k) => k !== key));
	};
	const items: MenuProps['items'] = defs.flatMap((def) => {
		if (isGroup(def))
			return def.children.map((child) => ({
				key: child.key,
				label: (
					<Checkbox
						checked={visibleKeys.includes(child.key)}
						onChange={(e) => toggle(child.key, e.target.checked)}
						onClick={(e) => e.stopPropagation()}>
						{def.title} - {child.title}
					</Checkbox>
				),
			}));
		return [
			{
				key: def.key,
				label: (
					<Checkbox
						checked={visibleKeys.includes(def.key)}
						onChange={(e) => toggle(def.key, e.target.checked)}
						onClick={(e) => e.stopPropagation()}>
						{def.title}
					</Checkbox>
				),
			},
		];
	});
	return (
		<Dropdown menu={{ items }} trigger={['click']} placement='bottomRight'>
			<Button icon={<Settings2 size={14} />}>Настройка таблицы</Button>
		</Dropdown>
	);
}