import Postmate from 'postmate';
import { useEffect } from 'react';
import { useGlobalStore } from '@/store/global';
import './index.css';

function Home() {
	const { count, increment } = useGlobalStore((state) => state);

	console.log('count', count);

	useEffect(() => {
		const handshake = new Postmate.Model({
			// Expose your model to the Parent. Property values may be functions, promises, or regular values
			height: () => (document as any).height || (document.body as any).offsetHeight,
		});

		// When parent <-> child handshake is complete, events may be emitted to the parent
		handshake.then((parent) => {
			parent.emit('some-event', 'Hello, World!');
		});
	}, []);

	return (
		<>
			<div>
				<div className="text-3xl font-bold underline">Hello World2</div>
			</div>
			<h1>Vite + React</h1>
			<button type="button" onClick={increment}>
				Increment
			</button>
			<p>Count: {count}</p>
		</>
	);
}

export default Home;