import "./styles.css";
import { useEffect, useRef, useState } from "react";
import { CSVLink } from "react-csv";
import MyService from "../../services/MyService";
import FileDownloadIcon from "@mui/icons-material/FileDownload";
import { LoadingButton } from "@mui/lab";

type Props = {
   id:number
};

export function ButtonToCSV({
   id
}: Props) {
  const [csvData, setCsvData] = useState<any>([]);
  const [isLoading, setIsLoading] = useState(false);
  const csvLinkEl = useRef<any>(null);

  const handleDownload = async (event) => {
    if (!isLoading) {
      setIsLoading(true);
      try {
        const data = await MyService.getCSV(id);
        setCsvData(data);
        setIsLoading(false);
      } catch (error) {
        console.log(error);
        setIsLoading(false);
      }
    }
  };

  useEffect(() => {
    if (csvData.length > 0 && csvLinkEl.current && !isLoading) {
      csvLinkEl.current.link.click();
    }
  }, [csvData]);

  return (
    <div>
      <LoadingButton
        loading={isLoading}
        loadingPosition="start"
        startIcon={<FileDownloadIcon />}
        variant="outlined"
        color="primary"
        className="button-export-csv-container"
        onClick={handleDownload}
      >
        Export
      </LoadingButton>
      <CSVLink
        asyncOnClick={true}
        style={{ color: "#000" }}
        data={csvData}
        ref={csvLinkEl}
      ></CSVLink>
    </div>
  );
}