import {
  useEffect,
  useRef,
  useState,
  type Dispatch,
  type SetStateAction,
} from 'react'
import { Outlet } from 'react-router-dom'
import * as Dialog from '@radix-ui/react-dialog'
import SimpleBar from 'simplebar-react'
import type SimpleBarCore from 'simplebar-core'
import 'simplebar-react/dist/simplebar.min.css'
import { Sidebar } from '../../widgets/Sidebar/Sidebar'
import './AppLayout.scss'
import { Navbar } from '../../widgets/Navbar/Navbar'
import { EmptyState } from '../../shared/ui/EmptyState/EmptyState'
import type { NavbarBreadcrumb } from '../../widgets/Navbar/Navbar'

export type AppLayoutOutletContext = {
  setNavbarBreadcrumbs: Dispatch<SetStateAction<NavbarBreadcrumb[]>>
}

export function AppLayout() {
  const [isSidebarDrawerOpen, setIsSidebarDrawerOpen] = useState(false)
  const contentScrollRef = useRef<SimpleBarCore | null>(null)
  const [isContentScrolled, setIsContentScrolled] = useState(false)
  const [navbarBreadcrumbs, setNavbarBreadcrumbs] = useState<
    NavbarBreadcrumb[]
  >([])

  useEffect(() => {
    const scrollElement = contentScrollRef.current?.getScrollElement()

    if (!scrollElement) return undefined
    const scrollContainer = scrollElement

    function handleScroll() {
      setIsContentScrolled(scrollContainer.scrollTop > 0)
    }

    handleScroll()
    scrollContainer.addEventListener('scroll', handleScroll, {
      passive: true,
    })

    return () => {
      scrollContainer.removeEventListener('scroll', handleScroll)
    }
  }, [])

  return (
    <div className="app-layout">
      <div className="app-layout__sidebar">
        <Sidebar />
      </div>

      <main className="app-layout__content">
        <SimpleBar ref={contentScrollRef} className="app-layout__scroll">
          <Navbar
            breadcrumbs={navbarBreadcrumbs}
            isScrolled={isContentScrolled}
            onOpenSidebar={() => setIsSidebarDrawerOpen(true)}
          />
          <div className="app-layout__route-content">
            <Outlet context={{ setNavbarBreadcrumbs }} />
          </div>
        </SimpleBar>
      </main>

      <Dialog.Root
        open={isSidebarDrawerOpen}
        onOpenChange={setIsSidebarDrawerOpen}
      >
        <Dialog.Portal>
          <Dialog.Overlay className="app-layout__drawer-overlay" />
          <Dialog.Content className="app-layout__drawer">
            <Dialog.Title className="app-layout__drawer-title">
              Навигация
            </Dialog.Title>

            <SimpleBar className="app-layout__drawer-scroll">
              <Sidebar
                mode="drawer"
                onNavigate={() => setIsSidebarDrawerOpen(false)}
              />
            </SimpleBar>
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

      <EmptyState
        className="app-layout__unsupported"
        variant="no-items"
        title="Экран пока не поддерживается"
        description="Для работы с системой используйте экран шириной от 1280 пикселей."
      />
    </div>
  )
}
