---
import Footer from '@components/Footer.astro'
import Navbar from '@components/Navbar.astro'
import BackToTop from '@components/control/BackToTop.astro'
import SideBar from '@components/widget/SideBar.astro'
import Layout from './Layout.astro'
import { Icon } from 'astro-icon/components'
import { siteConfig } from '../config'
import type { MarkdownHeading } from 'astro'
import TOC from "../components/widget/TOC.astro";
import ImageWrapper from "../components/misc/ImageWrapper.astro";
import {BANNER_HEIGHT, BANNER_HEIGHT_EXTEND, MAIN_PANEL_OVERLAPS_BANNER_HEIGHT} from "../constants/constants";

interface Props {
  title?: string
  banner?: string
  description?: string
  lang?: string
  setOGTypeArticle?: boolean;
  headings? : MarkdownHeading[]
}

const { title, banner, description, lang, setOGTypeArticle, headings = [] } = Astro.props
const hasBannerCredit =
  siteConfig.banner.enable && siteConfig.banner.credit.enable
const hasBannerLink = !!siteConfig.banner.credit.url

const mainPanelTop = siteConfig.banner.enable ? `calc(${BANNER_HEIGHT}vh - ${MAIN_PANEL_OVERLAPS_BANNER_HEIGHT}rem)` : "5.5rem"
---

<Layout title={title} banner={banner} description={description} lang={lang} setOGTypeArticle={setOGTypeArticle}>

<!-- Navbar -->
<slot slot="head" name="head"></slot>
<div id="top-row" class="z-50 pointer-events-none relative transition-all duration-700 max-w-[var(--page-width)] px-0 md:px-4 mx-auto" class:list={[""]}>
    <div id="navbar-wrapper" class="pointer-events-auto sticky top-0 transition-all">
        <Navbar></Navbar>
    </div>
</div>

<!-- Banner -->
{siteConfig.banner.enable && <div id="banner-wrapper" class=`absolute z-10 w-full transition duration-700 overflow-hidden` style=`top: -${BANNER_HEIGHT_EXTEND}vh`>
    <ImageWrapper id="banner" alt="Banner image of the blog" class:list={["object-cover h-full transition duration-700 opacity-0 scale-105"]}
                  src={siteConfig.banner.src} position={siteConfig.banner.position}
    >
    </ImageWrapper>
</div>}

<!-- Main content -->
<div class="absolute w-full z-30 pointer-events-none" style=`top: ${mainPanelTop}`>
    <!-- The pointer-events-none here prevent blocking the click event of the TOC -->
    <div class="relative max-w-[var(--page-width)] mx-auto pointer-events-auto">
        <div id="main-grid" class="transition duration-700 w-full left-0 right-0 grid grid-cols-[17.5rem_auto] grid-rows-[auto_1fr_auto] lg:grid-rows-[auto]
    mx-auto gap-4 px-0 md:px-4"
        >
            <!-- Banner image credit -->
            {hasBannerCredit && <a href={siteConfig.banner.credit.url} id="banner-credit" target="_blank" rel="noopener" aria-label="Visit image source"
                                   class:list={["group onload-animation transition-all absolute flex justify-center items-center rounded-full " +
                                   "px-3 right-4 -top-[3.25rem] bg-black/60 hover:bg-black/70 h-9", {"hover:pr-9 active:bg-black/80": hasBannerLink}]}
            >
                <Icon class="text-white/75 text-[1.25rem] mr-1" name="material-symbols:copyright-outline-rounded" ></Icon>
                <div class="text-white/75 text-xs">{siteConfig.banner.credit.text}</div>
                <Icon class:list={["transition absolute text-[oklch(0.75_0.14_var(--hue))] right-4 text-[0.75rem] opacity-0",
                    {"group-hover:opacity-100": hasBannerLink}]}
                      name="fa6-solid:arrow-up-right-from-square">
                </Icon>
            </a>}


            <SideBar class="mb-4 row-start-2 row-end-3 col-span-2 lg:row-start-1 lg:row-end-2 lg:col-span-1 lg:max-w-[17.5rem] onload-animation" headings={headings}></SideBar>

            <main id="swup-container" class="transition-swup-fade col-span-2 lg:col-span-1 overflow-hidden">
                <div id="content-wrapper" class="onload-animation">
                    <!-- the overflow-hidden here prevent long text break the layout-->
                    <!-- make id different from windows.swup global property -->
                    <slot></slot>
                    <div class="footer col-span-2 onload-animation hidden lg:block">
                        <Footer></Footer>
                    </div>
                </div>
            </main>

            <div class="footer col-span-2 onload-animation block lg:hidden">
                <Footer></Footer>
            </div>
        </div>

        <BackToTop></BackToTop>
    </div>
</div>

<!-- The things that should be under the banner, only the TOC for now -->
<div class="absolute w-full z-0">
    <div class="relative max-w-[var(--page-width)] mx-auto">
        <!-- TOC component -->
        <div id="toc-wrapper" class="transition absolute top-0 -right-[30rem] w-[30rem] flex items-center toc-hide">
            <div id="toc-inner-wrapper" class="fixed top-14 w-96 h-[calc(100vh_-_20rem)] overflow-y-scroll overflow-x-hidden hide-scrollbar">
                <div id="toc" class="w-full h-full transition-swup-fade">
                    <div class="h-8 w-full"></div>
                    <TOC headings={headings}></TOC>
                    <div class="h-8 w-full"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</Layout>