import { Divider } from "@mui/material";
import { FC, Fragment, useState } from "react";

import { Overlay, Popup } from "entities/popup";

import { useSubscribeToEvent } from "../lib";
import { CONTEXT_MENU } from "../model";
import { ButtonDownloadCSV } from "./ButtonDownloadCSV";
import { ButtonGroup } from "./ButtonGroup";
import { ButtonResetFilters } from "./ButtonResetFilters";
import { ButtonSummary } from "./ButtonSummary";
import { ButtonUngroup } from "./ButtonUngroup";
import { CollapseAll } from "./CollapseAll";
import { CopyRows } from "./CopyRows";
import { CopyToClipboard } from "./CopyToClipboard";
import { ExpandAll } from "./ExpandAll";
import { PasteRows } from "./PasteRows";
import { Print } from "./Print";

import Styled from "./ContextMenu.style";

export const ContextMenu: FC<Props> = ({ tableId }) => {
	const [isOpened, setIsOpened] = useState(false);

	useSubscribeToEvent(setIsOpened, tableId);

	if (!isOpened) return null;

	return (
		<Fragment>
			<Overlay setIsOpened={setIsOpened} />
			<Popup id={CONTEXT_MENU}>
				<Styled.Ul>
					<Print setIsOpened={setIsOpened} />
					<CopyToClipboard setIsOpened={setIsOpened} />
					<ButtonDownloadCSV setIsOpened={setIsOpened} />
					<Divider />
					<ButtonResetFilters setIsOpened={setIsOpened} />
					<ButtonUngroup setIsOpened={setIsOpened} />
					<ButtonGroup setIsOpened={setIsOpened} />
					<ExpandAll setIsOpened={setIsOpened} />
					<CollapseAll setIsOpened={setIsOpened} />
					<ButtonSummary setIsOpened={setIsOpened} />
					<CopyRows setIsOpened={setIsOpened} />
					<PasteRows setIsOpened={setIsOpened} />
				</Styled.Ul>
			</Popup>
		</Fragment>
	);
};

interface Props {
	tableId: string;
}