'use client'
import 'maplibre-gl/dist/maplibre-gl.css';
import type { Map, MapOptions } from 'maplibre-gl';
import maplibregl from 'maplibre-gl';
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 { useEffect, useRef } from 'react';
import { MapProvider } from './map-context';
import { MapComponent } from '@/components/map-component';
import { ThemeToggle } from '@/components/theme-toggle';
import { Timeline } from '@/components/timeline';

import { Dock } from "@/app/dock"

import {
  Home,
  Search,
  Music,
  Heart,
  Settings,
  Plus,
  User,
  Play,
  Pause
} from "lucide-react"


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" }
  ]


  const containerRef = useRef<HTMLDivElement | null>(null);
  const mapRef = useRef<Map | null>(null);

  useEffect(() => {
    if (!containerRef.current || mapRef.current) return;

    const options: MapOptions = {
      container: containerRef.current,
      style: 'https://demotiles.maplibre.org/style.json',
      center: [103.851959, 1.290270],  // 新加坡
      zoom: 11,
    };

    mapRef.current = new maplibregl.Map(options);
    mapRef.current.addControl(new maplibregl.NavigationControl(), 'top-right');
    return () => mapRef.current?.remove();
  }, []);

  return (
    <MapProvider>
      <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">
            <MapComponent />
            <Dock items={items} className="absolute top-1/2 right-4 -translate-y-1/2" />
            {/* <Timeline
              className="absolute bottom-4 left-1/2 -translate-x-1/2"
              startDate={new Date('2024-01-01')}
              endDate={new Date('2024-12-31')}
              currentDate={new Date()}
              onDateChange={(date) => console.log('Date changed:', date)}
              onPlay={() => console.log('Play')}
              onPause={() => console.log('Pause')}
              isPlaying={false}
              speed="normal"
              onSpeedChange={(speed) => console.log('Speed changed:', speed)}
            /> */}
          </div>
        </SidebarInset>
      </SidebarProvider>
    </MapProvider>
  )
}