import IconButton from "@mui/material/IconButton";
import { ArrowRight } from "@/Components/v2/Arrows/ArrowRight";
import { ArrowLeft } from "@/Components/v2/Arrows/ArrowLeft";
import { useTheme } from "@mui/material/styles";
import { useDispatch } from "react-redux";
import { toggleSidebar } from "../../../../Features/UI/uiSlice.js";

export const CollapseButton = ({ collapsed }: { collapsed: boolean }) => {
	const theme = useTheme();
	const dispatch = useDispatch();
	const arrowIcon = collapsed ? (
		<ArrowRight
			height={theme.spacing(8)}
			width={theme.spacing(8)}
			color={theme.palette.primary.contrastTextSecondary}
		/>
	) : (
		<ArrowLeft
			height={theme.spacing(8)}
			width={theme.spacing(8)}
			color={theme.palette.primary.contrastTextSecondary}
		/>
	);

	return (
		<IconButton
			sx={{
				position: "absolute",
				/* TODO 60 is a magic number. if logo chnges size this might break */
				top: 60,
				right: 0,
				transform: `translate(50%, 0)`,
				backgroundColor: theme.palette.tertiary.main,
				border: `1px solid ${theme.palette.primary.lowContrast}`,
				p: theme.spacing(2.5),

				"&:focus": { outline: "none" },
				"&:hover": {
					backgroundColor: theme.palette.primary.lowContrast,
					borderColor: theme.palette.primary.lowContrast,
				},
			}}
			onClick={() => {
				dispatch(toggleSidebar());
			}}
		>
			{arrowIcon}
		</IconButton>
	);
};