import * as React from "react"
import { Plus } from "lucide-react"
import { Calendars } from '@/app/calendars'
import { NavUser } from '@/app/nav-user'
import {
    Sidebar,
    SidebarContent,
    SidebarFooter,
    SidebarGroup,
    SidebarHeader,
    SidebarMenu,
    SidebarMenuButton,
    SidebarMenuItem,
    SidebarRail,
    SidebarSeparator,
} from '@/components/ui/sidebar'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Label } from "@/components/ui/label"
import { Slider } from "@/components/ui/slider"
import { useMapLocation, type LocationKey } from "@/hooks/use-map-location"
import { ThemeToggle } from "@/components/theme-toggle"
import { useMapZoom } from "@/hooks/use-map-zoom"

// This is sample data.
const data = {
    user: {
        name: "shadcn",
        email: "m@example.com",
        avatar: "/avatars/shadcn.jpg",
    },
    calendars: [
        {
            name: "My Calendars",
            items: ["Personal", "Work", "Family"],
        },
        {
            name: "Favorites",
            items: ["Holidays", "Birthdays"],
        },
        {
            name: "Other",
            items: ["Travel", "Reminders", "Deadlines"],
        },
    ],
}

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {

    const { currentLocation, flyToLocation, isMapReady } = useMapLocation();
    const { zoomToLocation, zoomIn, zoomOut, mapState } = useMapZoom();

    return (
        <Sidebar {...props}>
            <SidebarHeader className="h-16 border-b border-sidebar-border">
                <NavUser user={data.user} />
            </SidebarHeader>
            <SidebarContent>
                {/* <DatePicker /> */}
                <SidebarGroup className="p-2 gap-2 px-4">
                    <Label htmlFor="date">Location</Label>
                    <Select defaultValue={currentLocation} onValueChange={(value) => {
                        if (isMapReady) {
                            flyToLocation(value as LocationKey)
                        }
                    }}>
                        <SelectTrigger className="w-full" id="date" disabled={!isMapReady}>
                            <SelectValue placeholder={isMapReady ? "Select a location" : "Loading map..."} />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectItem value="usa">USA</SelectItem>
                            <SelectItem value="singapore">Singapore</SelectItem>
                            <SelectItem value="malaysia">Malaysia</SelectItem>
                            <SelectItem value="china">China</SelectItem>
                        </SelectContent>
                    </Select>
                </SidebarGroup>

                <SidebarSeparator className="mx-0" />

                <SidebarGroup className="p-2 gap-2 px-4">
                    <Label htmlFor="zoom">Zoom</Label>
                    <div className="flex items-center gap-2">
                        <Slider value={[mapState.zoomLevel]} min={5} max={23} step={0.1} onValueChange={value => zoomToLocation(value[0])} />
                        <span className="text-sm text-muted-foreground bg-muted rounded-md px-1 py-1 text-center w-10 inline-block">{mapState.zoomLevel.toFixed(1)}</span>
                    </div>
                </SidebarGroup>

                <SidebarSeparator className="mx-0" />
                <Calendars calendars={data.calendars} />
            </SidebarContent>
            <SidebarFooter>
                <SidebarMenu>
                    <SidebarMenuItem>
                        <SidebarMenuButton>
                            <Plus />
                            <span>New Calendar</span>
                        </SidebarMenuButton>
                    </SidebarMenuItem>
                </SidebarMenu>
            </SidebarFooter>
            <SidebarRail />
        </Sidebar>
    )
}