"use client";

import { DatePicker } from "antd";
import { useRouter, useSearchParams } from "next/navigation";
import dayjs from "dayjs";
import locale from "antd/es/date-picker/locale/ar_EG";
import { CalendarIcon } from "@/assets/svgs/TraderIcons";
import { useTranslations } from "next-intl";

export default function StatisticsDatePicker() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const t = useTranslations();
  const urlDate = searchParams.get("date");

  // Parse date or fallback to default
  const selectedDate = urlDate ? dayjs(urlDate, "YYYY-MM") : null;

  const onChange = (date: any) => {
    const params = new URLSearchParams(searchParams.toString());

    if (!date) {
      // Remove the 'date' parameter if the user clears the date
      params.delete("date");
    } else {
      // Otherwise, update the 'date' parameter
      const formattedDate = date.format("YYYY-MM");
      params.set("date", formattedDate);
    }

    router.replace(`${window.location.pathname}?${params.toString()}`);
  };

  return (
    <div className="flex items-center gap-2 bg-white rounded-md lg:rounded-2xl px-3 lg:px-5 py-2 lg:py-4">
      <DatePicker
        picker="month"
        locale={locale}
        format="MMMM YYYY"
        placeholder={t("LABELS.filter_date")}
        suffixIcon={<CalendarIcon className="text-xl" />}
        className="statistics-date-picker"
        value={selectedDate}
        onChange={onChange}
      />
    </div>
  );
}