import React, { useState } from "react";
import DataOffloadQueue from "./DataOffloadQueue/DataOffloadQueue";
import CTDOffload from "./CTDOffload/CTDOffload";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Accordion, AccordionDetails, AccordionSummary } from "@mui/material";

// Utilities
import { downloadFile } from "../../utils/download/download";
import { taskPackets } from "../../data/task_packets/task-packets";
import { getCSV, getCSVFilename } from "../../utils/download/csv-export";
import { getKMZ, getKMZFilename } from "../../utils/download/kmz-export";

import "./DataOffloadPanel.less";

/**
 * Displays the data offload queue and buttons to download task packet data
 */
export default function DataOffloadPanel() {
    const [isCTDPanelVisible, setIsCTDPanelVisible] = useState(false);

    /**
     * Initiates KMZ download of task packet data
     *
     * @returns {void}
     */
    const handleDownloadKMZ = async (event: React.MouseEvent<Element, MouseEvent>) => {
        event.stopPropagation();
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }
        const kmzFilename = getKMZFilename(taskPackets.getIncludedTaskPackets());
        downloadFile(kmzFilename, await getKMZ(taskPackets.getIncludedTaskPackets()));
    };

    /**
     * Initiates CSV download of task packet data
     *
     * @returns {void}
     */
    const handleDownloadCSV = async () => {
        const csvFilename = getCSVFilename(taskPackets.getIncludedTaskPackets());
        downloadFile(csvFilename, await getCSV(taskPackets.getIncludedTaskPackets()), "text/csv");
    };

    const handleDownloadCTD = () => {
        setIsCTDPanelVisible(true);
    };

    return (
        <div className="jaia-panel data-offload-panel">
            <div className="jaia-panel-title">Data Offload</div>
            <div className="button-row">
                <button onClick={handleDownloadCSV} aria-label={"download-csv"}>
                    CSV
                </button>
                <button onClick={(event) => handleDownloadKMZ(event)} aria-label={"download-kmz"}>
                    KMZ
                </button>
                <button onClick={handleDownloadCTD} aria-label={"download-ctd"}>
                    CTD
                </button>
            </div>
            <Accordion className="accordion-container">
                <AccordionSummary className="accordion-summary" expandIcon={<ExpandMoreIcon />}>
                    Progress Queue
                </AccordionSummary>
                <AccordionDetails>
                    <DataOffloadQueue />
                </AccordionDetails>
            </Accordion>
            <CTDOffload
                isVisible={isCTDPanelVisible}
                closeCTDPanel={() => setIsCTDPanelVisible(false)}
            />
        </div>
    );
}
