"use client";

import { useState } from "react";
import Toggle from "@/app/Components/Global/Toggle/Toggle";
import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
import PorServicios from "@/app/Components/Reportes/porServicio";
import PorRecibos from "@/app/Components/Reportes/porRecibo";
import MonthYearPicker from "@/app/Components/MonthYearPicker/MonthYearPicker";
import PeriodoPicker from "@/app/Components/PeriodoPicker/periodoPicker";
import { useRouter } from "next/navigation";
import PorServicio from "../Reportes-graficas/page";

export default function ReportesClient({
  defaultKey,
}: {
  defaultKey?: string;
}) {
  const router = useRouter();

  const [desde, setDesde] = useState<string | null>(null);
  const [hasta, setHasta] = useState<string | null>(null);
  const [periodo1, setPeriodo1] = useState<any>(null);
  const [periodo2, setPeriodo2] = useState<any>(null);

  return (
    <section className="containerSection" style={{ overflow: "visible", }}>
      <h2 className="title">REPORTES</h2>

      <Toggle
        defaultView={defaultKey}
        options={[
          {
            key: "Por recibo",
            label: "Por recibo",
            content: (
              <>
                <MonthYearPicker
                  onChange={(d, h) => {
                    setDesde(d);
                    setHasta(h);
                  }}
                />
                <PorRecibos desde={desde} hasta={hasta} />
              </>
            ),
          },
          {
            key: "Por Servicio",
            label: "Por Servicio",
            content: null,
          }
        ]}
      />
      {defaultKey == "Por Servicio" &&
      <PorServicio/>
      }
    </section>
  );
}