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.initAllChart();
        this.initChartTargetPAD();
        this.initChartUsaha();
        this.initChartNonUsaha();
    }

    initChartTargetPAD() {
        console.log("api host : " + GlobalConfig.apiHost);
        fetch(`${GlobalConfig.apiHost}/api/all-task-documents`)
            .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`)
            .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`)
            .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);
            });
    }

    initAllChart() {
        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [80, 100, 50, 30, 90],
                },
            ],
            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("#chart01"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
                },
            ],
            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("#chart02"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
                },
            ],
            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("#chart03"), options1).render();

        // var options1 = {
        //     chart: {
        //         type: 'area',
        //         height: 50,
        //         sparkline: {
        //             enabled: true
        //         }
        //     },
        //     series: [{
        //         data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
        //     }],
        //     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("#chart04"), options1).render();

        // var options1 = {
        //   chart: {
        //     type: 'area',
        //     height: 50,
        //     sparkline: {
        //       enabled: true
        //     }
        //   },
        //   series: [{
        //     data: [80, 100, 50, 30, 90]
        //   }],
        //   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("#chart05"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
                },
            ],
            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("#chart06"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
                },
            ],
            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("#chart07"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71],
                },
            ],
            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("#chart08"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [80, 100, 50, 30, 90],
                },
            ],
            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("#chart09"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [87, 54, 4, 76, 31, 95, 70, 92, 53, 9, 6],
                },
            ],
            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("#chart10"), options1).render();

        var options1 = {
            chart: {
                type: "area",
                height: 50,
                sparkline: {
                    enabled: true,
                },
            },
            series: [
                {
                    data: [41, 42, 35, 42, 6, 12, 13, 22, 42, 94, 95],
                },
            ],
            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("#chart11"), options1).render();

        // var options1 = {
        //     chart: {
        //         type: 'area',
        //         height: 50,
        //         sparkline: {
        //             enabled: true
        //         }
        //     },
        //     series: [{
        //         data: [8, 41, 40, 48, 77, 35, 0, 77, 63, 100, 71]
        //     }],
        //     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();
    }
}

document.addEventListener("DOMContentLoaded", function (e) {
    let apiTokenMeta = document.querySelector("meta[name='api-token']");

    if (apiTokenMeta && apiTokenMeta.content) {
        let apiToken = apiTokenMeta.content;
        localStorage.setItem("token", apiToken); // Simpan token ke localStorage
        console.log("Token berhasil disimpan:", apiToken);
    }
    new BigData().init();
});