import React, { useCallback, useEffect, useState } from "react"

import { CurrentChatModelSettings } from "../Common/Settings/CurrentChatModelSettings"
import { Header } from "./Header"

interface History {
  show: boolean
  setShow: (show: boolean) => void
}

export const HistoryContext = React.createContext<History>({
  show: true,
  setShow: () => {}
})

export default function OptionLayout({
  children
}: {
  children: React.ReactNode
}) {
  const [showHistory, setShowHistory] = useState(true)
  const [openModelSettings, setOpenModelSettings] = useState(false)

  const historyContextValue = {
    show: showHistory,
    setShow: setShowHistory
  }

  const useToggle = useCallback(() => {
    setShowHistory(!showHistory)
  }, [showHistory])

  return (
    <div className="flex h-full w-full">
      <main className="relative h-dvh w-full">
        <div className="relative z-10 w-full">
          <Header
            sidebarOpen={showHistory}
            setSidebarOpen={useToggle}
            setOpenModelSettings={setOpenModelSettings}
          />
        </div>
        {/* <div className="relative flex h-full flex-col items-center"> */}
        <HistoryContext.Provider value={historyContextValue}>
          {children}
        </HistoryContext.Provider>
        {/* </div> */}

        <CurrentChatModelSettings
          open={openModelSettings}
          setOpen={setOpenModelSettings}
          useDrawer
        />
      </main>
    </div>
  )
}
