import ApexCharts from "apexcharts";

import jsVectorMap from "jsvectormap/dist/jsvectormap.js";
import "jsvectormap/dist/maps/world-merc.js";
import "jsvectormap/dist/maps/world.js";
import GlobalConfig, { addThousandSeparators } from "../global-config.js";

class BigData {
    init() {
        this.initChartTargetPAD();
        this.initChartUsaha();
        this.initChartNonUsaha();
        this.initChartStatus1();
        this.initChartStatus2();
        this.initChartStatus3();
        this.initChartStatus4();
        this.initChartStatus5();
        this.initChartStatus6();
        this.initChartStatus7();
        this.initChartStatus20();
        this.initChartStatus24();
    }

    initChartTargetPAD() {
        fetch(`${GlobalConfig.apiHost}/api/all-task-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) => {
            const seriesData = data.data.series;
            document.getElementById(
                "countTargetPAD"
            ).innerText = `${data.data.count} Berkas`;
            document.getElementById(
                "totalTargetPAD"
            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart12"),
                options1
            ).render();
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }

    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) => {
            const seriesData = data.data.series;
            document.getElementById(
                "countBusinessDocuments"
            ).innerText = `${data.data.count} Berkas`;
            document.getElementById(
                "totalBusinessDocuments"
            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chartBusinessDocuments"),
                options1
            ).render();
        })
        .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) => {
            const seriesData = data.data.series;
            document.getElementById(
                "countNonUsaha"
            ).innerText = `${data.data.count} Berkas`;
            document.getElementById(
                "totalNonUsaha"
            ).innerText = `Rp.${addThousandSeparators(data.data.total)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chartNonUsaha"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#char-pbg-status-1"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-2"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-3"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-4"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-5"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-6"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-7"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-20"),
                options1
            ).render();
        })
        .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)}`;
            var options1 = {
                chart: {
                    type: "area",
                    height: 50,
                    sparkline: {
                        enabled: true,
                    },
                },
                series: [
                    {
                        data: seriesData,
                    },
                ],
                stroke: {
                    width: 2,
                    curve: "smooth",
                },
                markers: {
                    size: 0,
                },
                colors: ["#7e67fe"],
                tooltip: {
                    fixed: {
                        enabled: false,
                    },
                    x: {
                        show: false,
                    },
                    y: {
                        title: {
                            formatter: function (seriesName) {
                                return "";
                            },
                        },
                    },
                    marker: {
                        show: false,
                    },
                },
                fill: {
                    opacity: [1],
                    type: ["gradient"],
                    gradient: {
                        type: "vertical",
                        //   shadeIntensity: 1,
                        inverseColors: false,
                        opacityFrom: 0.5,
                        opacityTo: 0,
                        stops: [0, 100],
                    },
                },
            };

            new ApexCharts(
                document.querySelector("#chart-pbg-status-24"),
                options1
            ).render();
        })
        .catch((error) => {
            console.error("error fetching chart dara : ", error);
        });
    }
}

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