import React, { ReactNode } from "react";
import {
	Modal,
	ModalOverlay,
	ModalContent,
	ModalHeader,
	ModalFooter,
	ModalBody,
	Button,
	useColorModeValue,
	Flex,
	IconButton,
	ModalProps,
	ModalContentProps,
	ModalHeaderProps,
	ModalBodyProps,
	ModalFooterProps,
} from "@chakra-ui/react";
import { RiCloseFill } from "react-icons/ri";

export interface DialogProps extends ModalProps {
	title: string | ReactNode;
	children: ReactNode;
	size?: string;
	isOpen: boolean;
	onClose: () => void;
	onSave?: () => void;
	closeButton?: boolean;
	closeLabel?: string;
	saveLabel?: string;
	modalHeaderProps?: ModalHeaderProps;
	modalContentProps?: ModalContentProps;
	modalBodyProps?: ModalBodyProps;
	modalFooterProps?: ModalFooterProps;
	modalFooter?: ReactNode;
	hasCloseIcon?: boolean;
}

export function Dialog({
	title,
	children,
	size = "md",
	isOpen = false,
	onClose,
	onSave,
	closeButton = true,
	closeLabel = "Close",
	saveLabel = "Apply",
	modalFooter,
	hasCloseIcon = true,
	modalHeaderProps,
	modalContentProps,
	modalBodyProps,
	modalFooterProps,
	...rest
}: DialogProps) {
	const bg = useColorModeValue("white", "gray.800");
	const borderColor = useColorModeValue("gray.100", "gray.700");
	const color = useColorModeValue("gray.500", "gray.300");

	return (
		<Modal
			motionPreset="slideInBottom"
			scrollBehavior="outside"
			onClose={onClose}
			isOpen={isOpen}
			size={size}
			{...rest}
		>
			<ModalOverlay />
			<ModalContent
				boxShadow="xl"
				border="1px solid"
				borderRadius="20px"
				flexDirection="column"
				minH="170px"
				w="full"
				bg={bg}
				borderColor={borderColor}
				color={color}
				{...modalContentProps}
			>
				<ModalHeader
					px={6}
					py={4}
					d="flex"
					alignItems="center"
					justifyContent="space-between"
					borderBottom="1px solid"
					borderColor={borderColor}
					{...modalHeaderProps}
				>
					<Flex>{title}</Flex>

					{hasCloseIcon && (
						<Flex>
							<IconButton
								aria-label="Close dialog"
								variant="ghost"
								onClick={onClose}
								icon={<RiCloseFill size="32px" />}
							/>
						</Flex>
					)}
				</ModalHeader>

				{children && (
					<ModalBody
						px={6}
						py={4}
						flex="1 0 100%"
						{...modalBodyProps}
					>
						{children}
					</ModalBody>
				)}

				{modalFooter || (
					<ModalFooter
						p={0}
						margin="-1px"
						overflow="hidden"
						borderTop="1px solid"
						borderColor={borderColor}
						borderBottomLeftRadius="20px"
						borderBottomRightRadius="20px"
						{...modalFooterProps}
					>
						<Flex w="full">
							{closeButton && (
								<Button
									d="flex"
									size="lg"
									flex="1"
									borderRadius="0"
									onClick={onClose}
								>
									{closeLabel}
								</Button>
							)}
							{onSave && (
								<Button
									d="flex"
									size="lg"
									flex="1"
									borderRadius="0"
									colorScheme="cyan"
									onClick={onSave}
								>
									{saveLabel}
								</Button>
							)}
						</Flex>
					</ModalFooter>
				)}
			</ModalContent>
		</Modal>
	);
}