import * as React from 'react'

import {
  mountCoreAppChrome,
  type CoreAppChromeMount,
  type CoreAppChromeMountOptions,
  type CoreAppSidebarPresetOptions,
  type CoreAppTopbarPresetOptions,
} from '../../layout/core-app-chrome'
import { cn } from '../primitives/utils'

export interface CoreAppChromeProps extends Omit<
  CoreAppChromeMountOptions,
  'sidebarContainer' | 'topbarContainer' | 'topbar'
> {
  className?: string
  sidebarClassName?: string
  topbarClassName?: string
  topbar?: Omit<CoreAppTopbarPresetOptions, 'container'> | false
}

export type { CoreAppChromeMount, CoreAppSidebarPresetOptions, CoreAppTopbarPresetOptions }

function CoreAppChrome({
  className,
  sidebarClassName,
  topbarClassName,
  basePath,
  pathname,
  scope,
  sidebarUser,
  sidebarFooterActions,
  topbarUser,
  topbarActions,
  sidebar,
  topbar = {},
  preserveTopbarActions,
  topbarActionSelector,
  clearContainers,
}: CoreAppChromeProps) {
  const sidebarContainerRef = React.useRef<HTMLDivElement>(null)
  const topbarContainerRef = React.useRef<HTMLDivElement>(null)
  const mountRef = React.useRef<CoreAppChromeMount | null>(null)

  React.useEffect(() => {
    const sidebarContainer = sidebarContainerRef.current
    const topbarContainer = topbar === false ? undefined : topbarContainerRef.current

    if (sidebarContainer === null || (topbar !== false && topbarContainer === null)) {
      return
    }

    const mountOptions: CoreAppChromeMountOptions = { sidebarContainer }

    if (basePath !== undefined) mountOptions.basePath = basePath
    if (pathname !== undefined) mountOptions.pathname = pathname
    if (scope !== undefined) mountOptions.scope = scope
    if (sidebarUser !== undefined) mountOptions.sidebarUser = sidebarUser
    if (sidebarFooterActions !== undefined) mountOptions.sidebarFooterActions = sidebarFooterActions
    if (topbarUser !== undefined) mountOptions.topbarUser = topbarUser
    if (topbarActions !== undefined) mountOptions.topbarActions = topbarActions
    if (sidebar !== undefined) mountOptions.sidebar = sidebar
    if (preserveTopbarActions !== undefined)
      mountOptions.preserveTopbarActions = preserveTopbarActions
    if (topbarActionSelector !== undefined) mountOptions.topbarActionSelector = topbarActionSelector
    if (clearContainers !== undefined) mountOptions.clearContainers = clearContainers

    if (topbar !== false && topbarContainer !== undefined && topbarContainer !== null) {
      mountOptions.topbarContainer = topbarContainer
      mountOptions.topbar = topbar
    }

    mountRef.current = mountCoreAppChrome(mountOptions)

    return () => {
      mountRef.current?.destroy()
      mountRef.current = null
    }
  }, [
    basePath,
    pathname,
    scope,
    sidebarUser,
    sidebarFooterActions,
    topbarUser,
    topbarActions,
    sidebar,
    topbar,
    preserveTopbarActions,
    topbarActionSelector,
    clearContainers,
  ])

  return (
    <div data-slot="core-app-chrome" className={cn(className)}>
      <div
        ref={sidebarContainerRef}
        data-slot="core-app-sidebar"
        className={cn(sidebarClassName)}
      />
      {topbar === false ? null : (
        <div ref={topbarContainerRef} data-slot="core-app-topbar" className={cn(topbarClassName)} />
      )}
    </div>
  )
}

CoreAppChrome.displayName = 'CoreAppChrome'

export { CoreAppChrome }
