import View from '@/views/Views'
import { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import Demo from '@/views/public/Demo'
import { DemoProvider } from '@/contexts/DemoContext'
import { PUBLIC_FOOTER_COMPONENT, PUBLIC_HEADER_COMPONENT } from '@/utils/hooks/usePublicMenu'
import { useComponents } from '@/contexts/ComponentContext'

/**
 * Public site kabugu. Ust ve alt bilgi birer Custom Component'tir: tasarimlari
 * Visual Designer'dan duzenlenir, icerikleri kendi dugum agaclarinda yasar.
 * Burada yalnizca rota degisiminde basa sarma ve demo penceresi kalir.
 */
const PublicLayout = () => {
  const location = useLocation()
  const [isDemoOpen, setIsDemoOpen] = useState(false)
  const { isComponentRegistered, renderComponent } = useComponents()

  useEffect(() => {
    window.scrollTo(0, 0)
  }, [location.pathname])

  return (
    <DemoProvider value={{ openDemo: () => setIsDemoOpen(true) }}>
      <div className="flex min-h-screen flex-col overflow-x-hidden">
        {isComponentRegistered(PUBLIC_HEADER_COMPONENT) &&
          renderComponent(PUBLIC_HEADER_COMPONENT)}

        <main className="flex-grow">
          <View />
        </main>

        {isComponentRegistered(PUBLIC_FOOTER_COMPONENT) && renderComponent(PUBLIC_FOOTER_COMPONENT)}

        <Demo isOpen={isDemoOpen} onClose={() => setIsDemoOpen(false)} />
      </div>
    </DemoProvider>
  )
}

export default PublicLayout