'use client'
import { usePathname, useSearchParams } from 'next/navigation'
import s from './index.module.css'
import classNames from '@/utils/classnames'
import { useGetLayoutByChannel } from '@/hooks/use-channel'

type HeaderWrapperProps = {
  children: React.ReactNode
}

const HeaderWrapper = ({
  children,
}: HeaderWrapperProps) => {
  const pathname = usePathname()
  const searchParams = useSearchParams()
  const isBordered = ['/apps', '/datasets', '/datasets/create', '/tools'].includes(pathname)

  // 当不携带 header 参数时，或者 header 参数为 1 时，显示 header
  const headerParam = searchParams.get('header')
  const showHeader = !headerParam || headerParam === '1'

  // 通过 channel 获取 layout 数据内容
  const showLayout = useGetLayoutByChannel()

  if (!showHeader) return null
  return (
    <div className={classNames(
      `sticky top-0 left-0 right-0 z-30 ${showLayout ? 'flex' : 'hidden'} flex-col grow-0 shrink-0 basis-auto min-h-[56px]`,
      s.header,
      isBordered ? 'border-b border-divider-regular' : '',
    )}
    >
      {children}
    </div>
  )
}
export default HeaderWrapper
