import React, { Dispatch, SetStateAction } from "react";
import { SlickDataView } from "slickgrid";

import { eventContextMenu } from "shared/lib/slickgrid";

import Styled from "../ContextMenu.style";

export const CollapseAll: React.FC<Props> = ({ setIsOpened }) => {
	const table = eventContextMenu.table;

	function onClick() {
		const grid = table?.grid;
		if (!grid) return;
		const dataView: SlickDataView = grid.getData();
		dataView.collapseAllGroups();
		setIsOpened(false);
	}

	if (!table?.grouping.isGrouped) return null;

	return (
		<Styled.Li onClick={onClick}>
			<Styled.Icon className={"sgi sgi-collapse-all-outline"}></Styled.Icon>
			Collapse all groups
		</Styled.Li>
	);
};

interface Props {
	setIsOpened: Dispatch<SetStateAction<boolean>>;
}