import clsx from 'clsx'
import Head from 'next/head'
import type { ReactNode } from 'react'
import { FaDesktop } from 'react-icons/fa'
import type { PageMetadata } from 'utils/layout'

import { DefaultAppSeo } from './DefaultAppSeo'
// import { Issuebar } from './Issuebar'
import { Sidebar } from './Sidebar'

export interface LayoutProps {
  metadata?: PageMetadata
  children: ReactNode
}

export const Layout = ({ children, metadata = {} }: LayoutProps) => {
  return (
    <div className="overflow-hidden relative">
      <Head>
        <meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
      </Head>

      <DefaultAppSeo />

      {/* plumbus confetti */}
      {/* <div className="fixed inset-0 -z-10 pointer-events-none stargaze-gradient-bg opacity-50">
        <img alt="plumbus carina-nebula" className="fixed top-0 right-0 w-full h-[calc(100vh+180px)]" src="/carina-nebula.png" />
      </div> */}

      {/* actual layout container */}
      <div className="hidden sm:flex">
        <Sidebar />
        <div className="overflow-auto relative flex-grow h-screen no-scrollbar">
          <main
            className={clsx('mx-auto max-w-7xl', {
              'flex flex-col justify-center items-center':
                typeof metadata.center === 'boolean' ? metadata.center : true,
            })}
          >
            {children}
          </main>
        </div>
        {/* <Issuebar /> */}
      </div>

      <div className="flex flex-col justify-center items-center p-8 space-y-4 h-screen text-center bg-black/50 sm:hidden">
        <FaDesktop size={48} />
        <h1 className="text-2xl font-bold">Unsupported Viewport</h1>
        <p>
          StargazeStudio is best viewed on the big screen.
          <br />
          Please open StargazeStudio on your tablet or desktop browser.
        </p>
      </div>
    </div>
  )
}
