'use client';

import Loader from '@/components/common/Loader';
import DashboardHeader from '@/components/layout/dashboard-layout/Header/Header';
import Sidebar from '@/components/layout/dashboard-layout/Sidebar';
import { useAuthContext } from '@/context/auth-context';
import { pageLinks } from '@/helpers/constants';
import { useMyNavigation } from '@/hooks/useMyNavigation';
import { useMyTranslation } from '@/hooks/useMyTranslation';
import { Box, styled } from '@mui/material';
import { useLocale } from 'next-intl';
import { useRouter } from 'next/navigation';
import React, { useEffect } from 'react';

type Props = {
    children?: React.ReactNode;
};

const StyledLayout = styled(Box)`
    display: grid;
    grid-template-areas:
        'sidebar header'
        'sidebar main';
    grid-template-columns: 250px 1fr;
    grid-template-rows: 80px calc(100vh - 80px);
    font-family: 'SF Pro Display', sans-serif;

    .layout-header {
        grid-area: header;
        height: 100%;
    }
    .layout-sidebar {
        grid-area: sidebar;
    }
    .layout-main {
        grid-area: main;
        height: 100%;
        overflow: auto;
        background-color: #edf1f7;
        padding: 40px 40px 20px;
    }
`;

const DashboardLayout = (props: Props) => {
    const { isAuth, isLoading } = useAuthContext();
    const navigation = useMyNavigation();

    useEffect(() => {
        if (!isAuth && !isLoading) {
            navigation.push(pageLinks.login);
        }
    }, [isAuth, isLoading]);

    if (isLoading) return <Loader p={8} size={96} />;

    if (!isAuth && !isLoading) return null;

    return (
        <StyledLayout className='dashboard-layout'>
            <header className='layout-header'>
                <DashboardHeader />
            </header>
            <aside className='layout-sidebar'>
                <Sidebar />
            </aside>
            <main className='layout-main'>{props.children}</main>
        </StyledLayout>
    );
};

export default DashboardLayout;
