import React, { ReactNode, useState } from "react";
import {
	Drawer as ChakraDrawer,
	DrawerBody,
	DrawerHeader,
	DrawerOverlay,
	DrawerContent,
	IconButton,
	useColorModeValue,
	DrawerCloseButton,
	DrawerProps as ChakraDrawerProps,
} from "@chakra-ui/react";
import { RiArrowLeftSLine, RiArrowRightSLine } from "react-icons/ri";

export interface DrawerProps extends ChakraDrawerProps {
	isOpen: boolean;
	onClose(): void;
	children: ReactNode;
	title?: any;
	expandButton?: boolean;
	closeButton?: boolean;
	drawerBgColor?: string;
	expandedSize?:
		| "xl"
		| "sm"
		| "xs"
		| "md"
		| "lg"
		| "2xl"
		| "3xl"
		| "4xl"
		| "5xl"
		| "6xl"
		| "full";
	size?:
		| "xl"
		| "sm"
		| "xs"
		| "md"
		| "lg"
		| "2xl"
		| "3xl"
		| "4xl"
		| "5xl"
		| "6xl"
		| "full";
}

export function Drawer({
	isOpen,
	onClose,
	children,
	expandButton = true,
	closeButton = true,
	title,
	drawerBgColor,
	size = "sm",
	expandedSize = "xl",
	...rest
}: DrawerProps) {
	const [expanded, setExpanded] = useState(false);

	const drawerBgDefault = useColorModeValue("gray.50", "gray.800");

	const drawerBg = drawerBgColor || drawerBgDefault;

	return (
		<ChakraDrawer
			isOpen={isOpen}
			placement="right"
			onClose={onClose}
			size={expanded ? expandedSize : size}
			{...rest}
		>
			<>
				<DrawerOverlay />
				<DrawerContent bg={drawerBg}>
					{closeButton && <DrawerCloseButton />}
					<DrawerHeader
						d="flex"
						borderBottomWidth={1}
						alignItems="center"
					>
						{expandButton && (
							<IconButton
								aria-label="Expand drawer"
								size="sm"
								bg="transparent"
								mr={3}
								icon={
									expanded ? (
										<RiArrowRightSLine />
									) : (
										<RiArrowLeftSLine />
									)
								}
								onClick={() => setExpanded(!expanded)}
							/>
						)}

						{title && title}
					</DrawerHeader>

					{children && <DrawerBody>{children}</DrawerBody>}
				</DrawerContent>
			</>
		</ChakraDrawer>
	);
}