import { Dispatch, SetStateAction, useEffect } from "react";

import { eventOpenColumnFilters } from "shared/lib/slickgrid";
import { EColumnFilter } from "shared/model/enums";
import { IColumnFilterValue } from "shared/model/types";

import { makeVisible } from "entities/popup";

import { COLUMN_FILTERS, defaultValue } from "../../model";
import { firstIn } from "../select";

export function useOpenMenu(
	isOpened: boolean,
	setFilterId: Dispatch<SetStateAction<EColumnFilter>>,
	setValue: Dispatch<SetStateAction<IColumnFilterValue>>,
) {
	useEffect(() => {
		if (!isOpened) return;
		const menu = document.getElementById(COLUMN_FILTERS);
		if (!menu) return;
		const { columnId, group, table, x, y } = eventOpenColumnFilters;
		const grid = table?.grid;
		if (!grid) return;
		const args = table.filter.args;
		makeVisible(menu, x, y);
		const { filterId, value } = args.columnFilters?.[columnId] || {};
		const initialFilterId = filterId || firstIn(group);
		const initialValue = value || defaultValue;
		table.filter.args = {
			...args,
			columnFilters: {
				...args.columnFilters,
				[columnId]: {
					filterId: initialFilterId,
					group,
					value: initialValue,
				},
			},
		};
		setFilterId(initialFilterId);
		setValue(initialValue);
	}, [isOpened]);
}