import { ReactElement, useReducer, useRef, useState } from 'react';
import style from './mirror.module.css';

type MirrorPropserties = {
	children: [ReactElement, ReactElement];
	classnames?: {
		front: string;
		back: string;
	};
};

export function Mirror({ children, classnames }: MirrorPropserties) {
	//

	const front = useRef<HTMLDivElement>(null);
	const back = useRef<HTMLDivElement>(null);

	const [open, setOpen] = useState(false);
    
    const [FrontContent, BackContent] = children.map(c => () => c);

	function openCard() {
		if (front.current && back.current) {
			//
			front.current.style.transform = `perspective(500px) rotateX(90deg)`; // ${open ? '-' : ''}
			back.current.style.transform = `perspective(500px) rotateX(-90deg)`; // ${open ? '' : '-'}

			setTimeout(() => {
				back.current?.classList.toggle(style.reverse);
				front.current?.classList.toggle(style.reverse);

				const current = (open ? front : back).current;

				setTimeout(() => {
					if (current) current.style.transform = 'rotateX(0deg)';
					setOpen(!open);
				}, 50);
			}, 400);
		}
    }
    

	return (
		<>
			<div className={style.container} onClick={openCard}>
				<div ref={front} className={[classnames?.front || style.front, open ? style.reverse : ''].join(' ').trim()}>
					<FrontContent />
				</div>
				<div ref={back} className={[classnames?.back || style.back, !open ? style.reverse : ''].join(' ').trim()}>
                    <BackContent />
				</div>
			</div>
		</>
	);
}