import axios from "axios";
import { format } from "date-fns";
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

import { apiRequest } from "@api/request";

import BaseButton from "@components/Common/BaseButton/BaseButton";

import "./modalTicketToReport.scss";

const ModalTicketToReport = ({ show, onClose, additionalData }) => {
  const [date, setDate] = useState(new Date());

  const handleSubmit = async () => {
    const formattedDate = format(date, "yyyy-MM-dd");
    const data = {
      created_at: formattedDate,
      ...additionalData
    };
    console.log(data);

    try {
      await apiRequest("https://back.itguild.info/api/reports/create", {
        method: "POST",
        data: data
      });
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <div
      className={`modal-report-backdrop ${show ? "show" : ""}`}
      onClick={onClose}
    >
      <div
        className="modal-report-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="modal-report-close" onClick={onClose}></div>
        <h2>Выгрузка в отчет</h2>
        <div className="modal-report-date-picker">
          <DatePicker
            className="datePicker"
            locale="ru"
            selected={date}
            onChange={(date) => setDate(date)}
            dateFormat="dd/MM/yyyy"
          />
        </div>

        <div className="modal-report__buttons">
          <BaseButton
            styles={"button-add add-person-btn "}
            onClick={handleSubmit}
          >
            Выгрузить в отчет
          </BaseButton>
          <BaseButton
            styles={`button-add add-person-btn ${show ? "" : "disable"}`}
            onClick={handleSubmit}
          >
            Выгрузить и перейти в отчет
          </BaseButton>
        </div>
      </div>
    </div>
  );
};

export default ModalTicketToReport;