import { Box } from "@mui/material";
import { Dispatch, FC, SetStateAction } from "react";

import { hideColumns } from "../../lib";

import Styled from "./Item.style";

export const Item: FC<IProps> = ({
	hidden,
	columnId,
	columnName,
	setHidden,
}) => {
	function onClick() {
		const index = hidden.indexOf(columnId);
		const hiddenCopy = [...hidden];
		if (~index) {
			hiddenCopy.splice(index, 1);
		} else {
			hiddenCopy.push(columnId);
		}
		setHidden(hiddenCopy);
		hideColumns(hiddenCopy);
	}

	return (
		<Styled.Button onClick={onClick}>
			<Styled.Checkbox checked={!hidden.includes(columnId)} size={"small"} />
			<Box>{columnName}</Box>
		</Styled.Button>
	);
};

interface IProps {
	hidden: string[];
	columnId: string;
	columnName: string;
	setHidden: Dispatch<SetStateAction<string[]>>;
}