'use client'
import { AppSidebar } from '@/app/app-sidebar'
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbList,
  BreadcrumbPage,
} from '@/components/ui/breadcrumb'
import { Separator } from '@/components/ui/separator'
import {
  SidebarInset,
  SidebarProvider,
  SidebarTrigger,
} from '@/components/ui/sidebar'
import { MapComponent } from '@/components/map-component';
import { ThemeToggle } from '@/components/theme-toggle';
import { Timeline } from '@/app/timeline';

import {
  Home,
  Search,
  Settings,
  User,
  Play,
} from "lucide-react"
import { cn } from '@/lib/utils';
import { useTimeline } from '@/hooks/use-timeline';
import { useEffect } from 'react'
import { useRadarTile } from '@/hooks/use-radartile'


export default function Page() {

  const items = [
    { icon: Home, label: "Home" },
    { icon: Search, label: "Search" },
    { icon: Play, label: "Play" },
    { icon: User, label: "Profile" },
    { icon: Settings, label: "Settings" }
  ]

  // 创建默认时间范围（过去7天到未来3天）
  const now = new Date();
  const startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000); // 7天前
  const endDate = new Date(now.getTime() + 3 * 24 * 60 * 60 * 1000);   // 3天后
  const { setTime } = useTimeline()
  const { fetchRadarTile } = useRadarTile({})

  useEffect(() => {
    fetchRadarTile("http://127.0.0.1:3050/test")
  }, [])

  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset>
        <header className="sticky top-0 flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4">
          <SidebarTrigger className="-ml-1" />
          <Separator orientation="vertical" className="mr-2 h-4" />
          <div className="flex items-center gap-2 justify-between w-full">
            <Breadcrumb>
              <BreadcrumbList>
                <BreadcrumbItem>
                  <BreadcrumbPage>October 2024</BreadcrumbPage>
                </BreadcrumbItem>
              </BreadcrumbList>
            </Breadcrumb>
            <ThemeToggle />
          </div>
        </header>
        <div className="relative h-full w-full flex flex-col">
          <MapComponent />
          <Timeline
            className={
              cn(
                "backdrop-blur-lg border shadow-lg",
                "bg-background/90 border-border",
                "z-10"
              )
            }
            startDate={startDate}
            endDate={endDate}
            onDateChange={(date) => {
              console.log('Selected date:', date);
              setTime(date)
            }}
          />
        </div>
      </SidebarInset>
    </SidebarProvider>
  )
}