import { useState, useRef, useEffect } from 'react';
import { arrayToClassName } from 'elementor-app/utils/utils.js';

import Button from 'elementor-app/ui/molecules/button';
import Grid from 'elementor-app/ui/grid/grid';
import Icon from 'elementor-app/ui/atoms/icon';
import Text from 'elementor-app/ui/atoms/text';

import ModalSection from './modal-section';
import ModalTip from './modal-tip';

import './modal.scss';

export default function ModalProvider( props ) {
	const [ show, setShow ] = useState( props.show ),
		hideModal = () => {
			setShow( false );

			// The purpose of the props.setShow is to sync an external state with the component inner state.
			if ( props.setShow ) {
				props.setShow( false );
			}
		},
		showModal = () => {
			setShow( true );

			// The purpose of the props.setShow is to sync an external state with the component inner state.
			if ( props.setShow ) {
				props.setShow( true );
			}
		},
		modalAttrs = {
			...props,
			show,
			hideModal,
			showModal,
		};

	useEffect( () => {
		// Sync with external state.
		setShow( props.show );
	}, [ props.show ] );

	return (
		<>
			{
				props.toggleButtonProps &&
				<Button { ...props.toggleButtonProps } onClick={ showModal } />
			}

			<Modal { ...modalAttrs }>
				{ props.children }
			</Modal>
		</>
	);
}

ModalProvider.propTypes = {
	children: PropTypes.node.isRequired,
	toggleButtonProps: PropTypes.object,
	title: PropTypes.string,
	icon: PropTypes.string,
	show: PropTypes.bool,
	setShow: PropTypes.func,
	onOpen: PropTypes.func,
	onClose: PropTypes.func,
};

ModalProvider.defaultProps = {
	show: false,
};

ModalProvider.Section = ModalSection;
ModalProvider.Tip = ModalTip;

export const Modal = ( props ) => {
	const modalRef = useRef( null ),
		closeRef = useRef( null ),
		closeModal = ( e ) => {
			const node = modalRef.current,
				closeNode = closeRef.current,
				isInCloseNode = closeNode && closeNode.contains( e.target );

			// Ignore if click is inside the modal
			if ( node && node.contains( e.target ) && ! isInCloseNode ) {
				return;
			}

			props.hideModal();

			if ( props.onClose ) {
				props.onClose( e );
			}
		};

	useEffect( () => {
		if ( props.show ) {
			document.addEventListener( 'mousedown', closeModal, false );
			props.onOpen?.();
		}

		return () => document.removeEventListener( 'mousedown', closeModal, false );
	}, [ props.show ] );

	if ( ! props.show ) {
		return null;
	}

	return (
		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
		<div className="eps-modal__overlay" onClick={ closeModal }>
			<div className={ arrayToClassName( [ 'eps-modal', props.className ] ) } ref={ modalRef } >
				<Grid container className="eps-modal__header" justify="space-between" alignItems="center">
					<Grid item>
						<Icon className={ `eps-modal__icon ${ props.icon }` } />
						<Text className="title" tag="span">{ props.title }</Text>
					</Grid>
					<Grid item>
						<div className="eps-modal__close-wrapper" ref={ closeRef }>
							<Button text={ __( 'Close', 'elementor' ) } hideText icon="eicon-close" onClick={ props.closeModal } />
						</div>
					</Grid>
				</Grid>
				<div className="eps-modal__body">
					{ props.children }
				</div>
			</div>
		</div>
	);
};

Modal.propTypes = {
	className: PropTypes.string,
	children: PropTypes.any.isRequired,
	title: PropTypes.string.isRequired,
	icon: PropTypes.string,
	show: PropTypes.bool,
	setShow: PropTypes.func,
	hideModal: PropTypes.func,
	showModal: PropTypes.func,
	closeModal: PropTypes.func,
	onOpen: PropTypes.func,
	onClose: PropTypes.func,
};

Modal.defaultProps = {
	className: '',
};