"use client";
import { RANGE_OPTIONS } from "@/lib/chartRangeOptions";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

import { subDays } from "date-fns";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import { useState } from "react";
import { DateRange } from "react-day-picker";


type ChartDataProps = {
  queryKey: string;
  selectedRangeLabel: string;
};

const ChartDataFilter = (
  { queryKey, selectedRangeLabel }: ChartDataProps
) => {
  const searchParams = useSearchParams();
  const router = useRouter();
  const pathname = usePathname();
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: subDays(new Date(), 6),
    to: new Date(),
  });

  const setRange= (range: keyof typeof RANGE_OPTIONS | DateRange) => {
    const params = new URLSearchParams(searchParams);
    if (typeof range === "string") {
      params.set(queryKey, range);
      params.delete(`${queryKey}From`);
      params.delete(`${queryKey}To`);
    } else {
      if (range.from == null || range.to == null){
        params.delete(`${queryKey}From`);
        params.delete(`${queryKey}To`);
        params.set(queryKey, "last_7_days");
      }else{
        params.delete(queryKey);
        params.set(`${queryKey}From`, range.from.toISOString());
        params.set(`${queryKey}To`, range.to.toISOString());
      }
    }
    router.push(`${pathname}?${params.toString()}`, { scroll: true });
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant={"outline"} className="text-heading2-bold text-grey-1">
          {selectedRangeLabel}
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        {Object.entries(RANGE_OPTIONS).map(([key, value]) => (
          <DropdownMenuItem
            className="text-grey-1"
            onClick={() => setRange(key as keyof typeof RANGE_OPTIONS)}
            key={key}
          >
            {value.label}
          </DropdownMenuItem>
        ))}
        <DropdownMenuSeparator />
        <DropdownMenuSub>
          <DropdownMenuSubTrigger className="text-grey-1">
            Custom
          </DropdownMenuSubTrigger>
          <DropdownMenuSubContent>
            <div className="bg-slate-200">
              <Calendar
                mode="range"
                disabled={{ after: new Date() }}
                selected={dateRange}
                defaultMonth={dateRange?.from}
                onSelect={setDateRange}
                numberOfMonths={2}
              />
              <DropdownMenuItem className="hover:bg-auto">
                <Button
                  onClick={() => {
                    if (dateRange == null) return;
                    setRange(dateRange);
                  }}
                  disabled={dateRange == null}
                  className="w-full"
                >
                  Submit
                </Button>
              </DropdownMenuItem>
            </div>
          </DropdownMenuSubContent>
        </DropdownMenuSub>
      </DropdownMenuContent>
    </DropdownMenu>
  );

};

export default ChartDataFilter;