import ApexCharts from "apexcharts";

import GlobalConfig, { addThousandSeparators } from "../global-config.js";

class BigData {
    async init() {
        try{
            this.resultDataTotal = await this.getTotalAllTask();

            if (!this.resultDataTotal) {
                console.error("Failed to load chart data");
                return;
            }

            this.initChartTargetPAD();
            this.initChartUsaha();
            this.initChartNonUsaha();
            this.initChartStatus1();
            this.initChartStatus2();
            this.initChartStatus3();
            this.initChartStatus4();
            this.initChartStatus5();
            this.initChartStatus6();
            this.initChartStatus7();
            this.initChartStatus20();
            this.initChartStatus24();
        }catch(e){
            console.error(e);
        }
    }

    async getTotalAllTask() {
        try {
            const response = await fetch(`${GlobalConfig.apiHost}/api/all-task-documents`, {
                credentials: "include",
                headers: {
                    Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                    "Content-Type": "application/json",
                },
            });
    
            if (!response.ok) {
                console.error("Network response was not ok", response);
            }
    
            const data = await response.json();
            return {
                seriesData: data.data.series,
                countData: data.data.count,
                totalData: data.data.total
            };
    
        } catch (error) {
            console.error("Error fetching chart data:", error);
            return null; // Mengembalikan null jika terjadi error
        }
    }

    initChartTargetPAD() {
        const total = this.resultDataTotal.totalData;
        const count = this.resultDataTotal.countData;
        document.querySelectorAll('.document-count.chart-all-task').forEach((element) => {
            element.innerText = `${count}`;
        });
        document.querySelectorAll('.document-total.chart-all-task').forEach((element) => {
            element.innerText = `Rp.${addThousandSeparators(total)}`;
        });
        document.querySelectorAll('.small-percentage.chart-all-task').forEach((element) => {
            element.innerText = `${100}%`;
        });
    }
    initChartUsaha() {
        fetch(`${GlobalConfig.apiHost}/api/business-documents`,{
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            },
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            // Pastikan this.resultDataTotal sudah ada
            if (!this.resultDataTotal) {
                console.error("Error: resultDataTotal is undefined");
                return;
            }

            const totalAll = this.resultDataTotal.totalData ?? 0;
            const countAll = this.resultDataTotal.countData ?? 0;
            const countUsaha = data?.data?.count ?? 0;
            const totalUsaha = data?.data?.total ?? 0;

            // Perbaikan perhitungan persentase
            let resultPercentage = 0;
            if (countUsaha > 0) {
                resultPercentage = (countUsaha / countAll) * 100;
                if (resultPercentage > 100) {
                    resultPercentage = 100; // Batasi maksimum 100%
                }
            }
            document.querySelectorAll('.document-count.chart-business').forEach((element) => {
                element.innerText = `${countUsaha}`;
            });
            document.querySelectorAll('.document-total.chart-business').forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(totalUsaha)}`;
            });
            document.querySelectorAll('.small-percentage.chart-business').forEach((element) => {
                element.innerText = `${resultPercentage.toFixed(2)}%`;
            });
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartNonUsaha() {
        fetch(`${GlobalConfig.apiHost}/api/non-business-documents`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            },
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            // Pastikan this.resultDataTotal sudah ada
            if (!this.resultDataTotal) {
                console.error("Error: resultDataTotal is undefined");
                return;
            }

            const totalAll = this.resultDataTotal.totalData ?? 0;
            const countAll = this.resultDataTotal.countData ?? 0;
            const countUsaha = data?.data?.count ?? 0;
            const totalUsaha = data?.data?.total ?? 0;

            // Perbaikan perhitungan persentase
            let resultPercentage = 0;
            if (countUsaha > 0) {
                resultPercentage = (countUsaha / countAll) * 100;
                if (resultPercentage > 100) {
                    resultPercentage = 100; // Batasi maksimum 100%
                }
            }
            document.querySelectorAll('.document-count.chart-non-business').forEach((element) => {
                element.innerText = `${data.data.count}`;
            });
            document.querySelectorAll('.document-total.chart-non-business').forEach((element) => {
                element.innerText = `Rp.${addThousandSeparators(data.data.total)}`;
            });
            document.querySelectorAll('.small-percentage.chart-non-business').forEach((element) => {
                element.innerText = `${resultPercentage.toFixed(2)}%`;
            });
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus1(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=1`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus1"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus1"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus2(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=2`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus2"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus2"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus3(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=3`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus3"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus3"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus4(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=4`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus4"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus4"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus5(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=5`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus5"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus5"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus6(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=6`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus6"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus6"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus7(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=7`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus7"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus7"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus20(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=20`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus20"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus20"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
    initChartStatus24(){
        fetch(`${GlobalConfig.apiHost}/api/pbg-task-documents?status=24`, {
            credentials: "include",
            headers: {
                Authorization: `Bearer ${document.querySelector("meta[name='api-token']").content}`,
                "Content-Type": "application/json",
            }
        })
        .then((response) => {
            if (!response.ok) {
                throw new Error("Network response was not ok");
            }
            return response.json();
        })
        .then((data) => {
            const seriesData = data.data.series;
            // document.getElementById(
            //     "countStatus24"
            // ).innerText = `${data.data.count} Berkas`;
            // document.getElementById(
            //     "totalStatus24"
            // ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }

}

class ArrowConnectorCircles {
    init(){
        // Memanggil fungsi saat halaman dimuat dan ketika layar diubah ukurannya
        document.addEventListener("resize", this.updateLine());
        document.addEventListener("load", this.updateLine());
    }

    updateLine() {
        const circle1 = document.getElementById("chart-all-task-1").getBoundingClientRect();
        const circle2 = document.getElementById("chart-all-task-2").getBoundingClientRect();
        const line = document.getElementById("connector-line");

        console.log(circle1);
        console.log(circle2);
    
        line.setAttribute("x1", circle1.left + circle1.width / 2);
        line.setAttribute("y1", circle1.top + circle1.height / 2);
        line.setAttribute("x2", circle2.left + circle2.width / 2);
        line.setAttribute("y2", circle2.top + circle2.height / 2);
    }
}

document.addEventListener("DOMContentLoaded", async function (e) {
    await new BigData().init();
    // new ArrowConnectorCircles().init();
});

function resizeDashboard(){
        //Target Width
        let targetElement = document.getElementById("dashboard-fixed-wrapper");
        let targetWidth = targetElement.offsetWidth;
        //console.log("TARGET ",targetWidth);

        //Real Object Width
        let dashboardElement = document.getElementById("dashboard-fixed-container");
        let dashboardWidth = 1110; //dashboardElement.offsetWidth;
        //console.log("CURRENT ",dashboardWidth);

        if(targetWidth> dashboardWidth){
            targetWidth = dashboardWidth;
        }

        dashboardElement.style.transformOrigin = "left top";
        dashboardElement.style.transition = "transform 0.2s ease-in-out";
        dashboardElement.style.transform = "scale(" + (targetWidth/dashboardWidth).toFixed(2) +  ")";
        //console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
    }

window.addEventListener("load", function () {
    resizeDashboard();
});

window.addEventListener("resize", function () {
    resizeDashboard();

});