import '/styles/globals.css'
import type { ReactElement, ReactNode } from 'react'
import Layout from '../components/layout'
import type { NextPage } from 'next'
import { AppProps } from 'next/app';
import { DefaultTheme, ThemeProvider } from 'styled-components';
import { createContext, useContext, useEffect, useState } from 'react'
import { darkTheme } from '../components/themes';
import { getTheme } from '../components/themeselector';

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

export type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}


const ThemeUpdateContext = createContext(
  (theme: DefaultTheme) => console.error("attempted to set theme outside of a ThemeUpdateContext.Provider")
)

export const useUpdateTheme = () => useContext(ThemeUpdateContext);


export default function Website({ Component, pageProps }: AppPropsWithLayout) {
  const [selectedTheme, setselectedTheme] = useState(darkTheme);


  useEffect(() => {
    const storedThemeIdTemp = localStorage.getItem("theme");
    // get stored theme data
    // if theme data differs set it
    // if not just exit
    if (storedThemeIdTemp && parseInt(storedThemeIdTemp) !== selectedTheme.themeId) {
      setselectedTheme(getTheme(parseInt(storedThemeIdTemp)))
    }
  }, [selectedTheme])


  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => (
    <Layout>{page}</Layout>))

  return (
    <ThemeProvider theme={selectedTheme}>
      <ThemeUpdateContext.Provider value={setselectedTheme}>
        {getLayout(<Component {...pageProps} />)}
      </ThemeUpdateContext.Provider>
    </ThemeProvider>
  )
}