import React from 'react'
import Head from 'next/head'
import TopBar from './Topbar'
import { css } from '@emotion/css'
import Footer from './Footer'
import { Sidebar, SidebarProps } from './Sidebar'
import Hero from './Hero'


type LayoutProps = {
    title: string
    description?: string
    heroImage?: React.ReactNode
    sidebar?: SidebarProps
    showHero?: boolean
}

const LayoutWithSidebar = css({
    display: 'grid',
    minHeight: '100vh',
    position: 'relative',
    gridTemplateColumns: '272px 1fr',
    gridTemplateAreas: "'header header' 'sidebar main' 'sidebar footer'",
    gridTemplateRows: 'auto 1fr auto'
})

const LayoutWithoutSidebar = css({
    display: 'grid',
    minHeight: '100vh',
    position: 'relative',
    gridTemplateAreas: "'header header' 'main main' 'footer footer'",
    gridTemplateRows: 'auto 1fr auto'
})

const Layout: React.FC<LayoutProps> = ({ title, children, description, sidebar, showHero, heroImage }) => {
    return (
        <div
            className={!!sidebar ? LayoutWithSidebar : LayoutWithoutSidebar}
        >
            <Head>
                <title>{title} - knk UI</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <div className={css({
                gridArea: 'header',
                zIndex: 200,
                position: 'sticky',
                top: 0
            })}>
                <TopBar />
            </div>
            {!!sidebar && (
                <Sidebar
                    {...sidebar}
                />
            )}
            
            <main
                className={css({
                    gridArea: 'main',
                    display: 'grid',
                    position: 'relative',
                    gridTemplateRows: 'auto 1fr',
                    gridTemplateColumns: 'minmax(640px,960px) 1fr',
                    gridTemplateAreas: "'hero hero' 'content nav'"
                })}
            >
                {!!showHero && (<Hero title={title} description={description} image={heroImage} />)}
                <div
                    className={css({
                        display: 'grid',
                        gridTemplateColumns: 'repeat(12, 1fr)',
                        gap: 16,
                        gridAutoRows: 'max-content',
                        gridArea: "content / content / content / content",
                        padding: '32px 80px 80px',
                        marginTop: 0,
                        maxWidth: 960,
                        position: 'relative',

                        '> * ': {
                            gridColumn: '1 / span 12',
                            marginTop: 0,
                            marginBottom: 0
                        }
                    })}
                >
                    {children}
                </div>
            </main>
            <Footer />
        </div>
    )
}

export default Layout
