"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";

export default function ReportesClient({
  defaultKey,
}: {
  defaultKey?: string;
}) {
  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: (
              <div style={{ maxHeight: "400px", width: "100%", overflow: "visible" }}>
                <PeriodoPicker
                  onChange={(p1, p2) => {
                    setPeriodo1(p1);
                    setPeriodo2(p2);
                  }}
                />
                {periodo1 && periodo2 && (
                  <PorServicios
                    key={`${periodo1?.id_periodo}-${periodo2?.id_periodo}`}
                    periodo1={periodo1}
                    periodo2={periodo2}
                  />
                )}
              </div>
            ),
          }
        ]}
      />
    </section>
  );
}
