import { useState } from 'react';

import { Button } from '@/components/ui/button';
import {
    Grid,
    GridCol,
} from '@/components/ui/grid';
import { MobilePage } from '@/components/ui/mobile';
import { SystemWindowDialog } from '@/components/ui/system-window-dialog';
import useAppConfigStore from '@/stores/appConfig';
import { useMainPage } from '@/stores/mainPage';

import { AppSidebar } from './AppSidebar';
import MainScreenContent from './MainScreenContent';

const SystemWindowDialogDemo = () => {
    const [open1, setOpen1] = useState(false);
    const [open2, setOpen2] = useState(false);

    return (
        <>
            <div className="fixed bottom-4 right-4 z-40 flex flex-col gap-2">
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setOpen1(true)}
                >
                    System Window 1
                </Button>
                <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setOpen2(true)}
                >
                    System Window 2
                </Button>
            </div>
            <SystemWindowDialog
                open={open1}
                onOpenChange={setOpen1}
                title="System Window Demo 1"
                width="70vw"
                height="60vh"
                allowFullscreen
                allowMinimize
                stackIndex={0}
                footer={
                    <>
                        <Button variant="outline" onClick={() => setOpen1(false)}>
                            Отмена
                        </Button>
                        <Button onClick={() => setOpen1(false)}>OK</Button>
                    </>
                }
            >
                <p className="text-sm text-muted-foreground">
                    Модальное окно с chrome macOS или Windows в зависимости от ОС.
                    Попробуйте свернуть, развернуть на весь экран или открыть второе окно.
                </p>
            </SystemWindowDialog>
            <SystemWindowDialog
                open={open2}
                onOpenChange={setOpen2}
                title="System Window Demo 2"
                width="60vw"
                height="50vh"
                allowMinimize
                stackIndex={1}
            >
                <p className="text-sm text-muted-foreground">
                    Второе окно со смещением и отдельным табом при сворачивании.
                </p>
            </SystemWindowDialog>
        </>
    );
};

const MainScreenLayout = () => {

    const { isMobile } = useAppConfigStore();
    const { profile } = useMainPage();




    if (isMobile) {
        return <>

            <MobilePage>
                <MainScreenContent />
                <AppSidebar />
            </MobilePage>


        </>
    }

    return <>
        <Grid className='h-screen w-screen'>
            <GridCol width="300px" className='border-r'>
                <AppSidebar />
            </GridCol>
            <GridCol  >
                <MainScreenContent />
            </GridCol>
        </Grid>


    </>
}

export default MainScreenLayout;