import React, { useEffect, useRef } from 'react';
import { PiAppleLogo, PiWindowsLogo } from 'react-icons/pi';
import type { Meta } from '@storybook/react-vite';
import { useStore } from 'zustand';
import { ComponentProvider } from '../components';
import { useRootWindow, useWindow } from './ReactWindow';
import { WindowFrame } from './WindowFrame';
import { WindowHost } from './WindowHost';
import { getWindowStyleStore } from './WindowStyleStore';
import { WindowTest } from './WindowTest';

const meta: Meta = {
	title: 'window',
	parameters: {
		layout: 'fullscreen',
	},
};
export default meta;

export const Windows = () => {
	let store = getWindowStyleStore();
	let theme = useStore(store, (s) => s.theme) ?? 'system';
	let ref = useRef<HTMLInputElement>(null);
	useEffect(() => {
		if (!ref.current) {
			return;
		}
		if (theme === 'system') {
			ref.current.indeterminate = true;
		} else {
			ref.current.checked = theme !== 'macos';
		}
	}, [ref.current, theme]);
	return (
		<div className={'flex flex-col gap-4'}>
			<label className={'flex items-center gap-1'}>
				<PiAppleLogo />
				<input
					ref={ref}
					type='checkbox'
					className='toggle toggle-xs'
					onChange={(e) => {
						let loop = ['macos', 'system', 'windows'] as const;
						const next = loop[(loop.indexOf(theme) + 1) % loop.length];
						store.setState({ theme: next });
					}}
				/>
				<PiWindowsLogo />
			</label>
			<WindowFrame title={'My Windows Application'}>Hello</WindowFrame>
		</div>
	);
};
export const Demo = () => {
	let win = useRootWindow();
	return (
		<ComponentProvider components={[]}>
			<div className={'h-full w-full'}>
				<div className={'flex'}>
					<button
						type={'button'}
						className={'btn btn-ghost'}
						onClick={() => {
							win.open({
								title: 'Test Title',
								render: () => {
									return <WindowTest />;
								},
							});
						}}
					>
						打开窗口
					</button>
					<input type='text' placeholder={'Can input here, the window will not trap the focus'} />
				</div>
				<WindowHost />
			</div>
		</ComponentProvider>
	);
};