import Button from "@/components/generics/button/Button";
import { downloadExcel } from "@/shared/utils/downloadExcel";
import { useState } from "react";
import "./Logs.scss";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { LogRequestType } from "@/api/predictions/types";
import { useGetLogs } from "@/api/predictions/hooks";

const Logs = () => {
  const [startDate, setStartDate] = useState<Date | undefined>(undefined);
  const [endDate, setEndDate] = useState<Date | undefined>(undefined);

  const { mutate, isPending } = useGetLogs();

  const handleDownload = () => {
    const localStartDate = startDate;
    localStartDate?.setHours(0, 0, 0, 0);

    const localEndDate = endDate;
    localEndDate?.setHours(23, 59, 0, 0);

    const data: LogRequestType = {
      date_start: localStartDate?.toISOString(),
      date_end: localEndDate?.toISOString(),
    };

    mutate(data, {
      onSuccess: (data) => {
        downloadExcel(data);
      },
    });
  };

  return (
    <div className="logs_page">
      <h1 className="header">Пользовательские логи</h1>
      <div className="filters">
        <div className="dates_container">
          <div className="date_filter">
            <label htmlFor="startDate">Дата начала</label>
            <DatePicker
              id="startDate"
              dateFormat="dd/MM/yyyy"
              selected={startDate}
              onChange={(date) => setStartDate(date ?? undefined)}
              selectsStart
              isClearable={true}
              showIcon
            />
          </div>
          <div className="date_filter">
            <label htmlFor="endDate">Дата окончания</label>
            <DatePicker
              id="endDate"
              dateFormat="dd/MM/yyyy"
              selected={endDate}
              onChange={(date) => setEndDate(date ?? undefined)}
              selectsEnd
              isClearable={true}
              showIcon
            />
          </div>
        </div>
        <Button name={"Скачать excel"} onClick={handleDownload} loading={isPending} />
      </div>
    </div>
  );
};

export default Logs;