import { useState } from 'react';

import { PanelRightClose } from 'lucide-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 { Lang } from '@/lang/Lang';
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();
    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);

    if (isMobile) {
        return <>

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


        </>
    }

    return <>
        <Grid className='h-screen w-screen'>
            {!sidebarCollapsed && (
                <GridCol width="300px" className='border-r'>
                    <AppSidebar onCollapse={() => setSidebarCollapsed(true)} />
                </GridCol>
            )}
            <GridCol className="relative">
                {sidebarCollapsed && (
                    <Button
                        tooltip={Lang.key('expand_sidebar')}
                        variant="default"
                        size="icon-sm"
                        className="absolute hover:left-0 top-1/2 z-10 -translate-y-1/2 rounded-l-none border-l-0 -left-4"
                        onClick={() => setSidebarCollapsed(false)}
                        aria-label={Lang.key('expand_sidebar')}
                    >
                        <PanelRightClose />
                    </Button>
                )}
                <MainScreenContent />
            </GridCol>
        </Grid>


    </>
}

export default MainScreenLayout;