// Dependencies
import React, { FC, Children, cloneElement, useCallback } from 'react';
import { Modal as MuiModal, Grid } from "@mui/material";
import PropTypes from 'prop-types';
import cx from 'classnames';
// Components
import { Tooltip, IconButton } from '..';

// Styles
import './style.scss';
import { ModalProps } from "./types"
import { Loading } from '../Loading';

export const Modal: FC<ModalProps> = ({
	title = "",
	children,
	footer = "",
	size = "small",
	position = "right",
	open = false,
	className = "",
	style = {},
	loading = false,
	closeButton = true,
	disableAutoFocus = false,
	disableEnforceFocus = false,
	disableEscapeKeyDown = false,
	disablePortal = false,
	disableRestoreFocus = false,
	disableScrollLock = false,
	hideBackdrop = false,
	keepMounted = false,
	handleClose,
	onClose,
}) => {
	let childs = [];
	if (Array.isArray(children)) {
		childs = children.map((child) => child);
	} else {
		childs.push(children);
	}

	const childrenWithProps = Children.map(childs, (child) => {
		return cloneElement(child, { position: position, size: size });
	});

	const getHeader = () => {
		if (typeof title === "string") {
			return (
				<div
					className={cx(
						'gtc-rc-modal-header',
						`gtc-rc-modal-header-${size}`,
					)}
				>
					<div 
						className='gtc-rc-modal-title'
						style={{ width: `calc(100% - ${closeButton ? 34 : 0}px)`}}
					>
						{title}
					</div>

					{closeButton && (
						<div className='gtc-rc-modal-close-button'>
							<IconButton
								size="small"
								icon="close"
								className="gtc-rc-btn-close"
								onClick={() => {
									if (handleClose) {
										handleClose();
									}
								}}
							/>
						</div>
					)}
				</div>
			);
		}

		return (
			<div className='gtc-rc-modal-custom-header'>
				{title}
			</div>
		);
	}

	const getFooter = () => {
		return (
			<div
				className={cx(
					'gtc-rc-modal-footer',
					`gtc-rc-modal-footer-${size}`,
				)}
			>
				{footer}
			</div>
		);
	}

	const getHeight = () => {
		if (!title && !footer) {
			return "calc(100% - 0px)";
		} else if (!title) {
			return "calc(100% - 60px)";
		} else if (!footer) {
			return "calc(100% - 48px)";
		} else {
			return "calc(100% - 108px)";
		}
	}

	return (
		<MuiModal
			open={open}
			aria-labelledby="modal-title"
			aria-describedby="modal-description"
			className={cx("gtc-rc-modal-container", size === "full-screen" ? "" : `gtc-rc-modal-${position}`)}
			style={{ ...style }}
			onClose={onClose}
			disableAutoFocus={disableAutoFocus}
			disableEnforceFocus={disableEnforceFocus}
			disableEscapeKeyDown={disableEscapeKeyDown}
			disablePortal={disablePortal}
			disableRestoreFocus={disableRestoreFocus}
			disableScrollLock={disableScrollLock}
			hideBackdrop={hideBackdrop}
			keepMounted={keepMounted}

		>
			<>
				{
					title && getHeader()
				}

				<div
					className={cx(
						'gtc-rc-modal-content',
						`gtc-rc-modal-${size}`,
						className || "",
					)}
					style={{ height: getHeight() }}
				>
					{
						loading &&
						<Loading overlay show />
					}
					
					<>
						{childrenWithProps}
					</>
				</div>

				{
					footer && getFooter()
				}
			</>
		</MuiModal>
	);
};