<template>
    <div ref="StackedBarChart" style="height: 500px"></div>
</template>

<script>
import * as am5 from "@amcharts/amcharts5";
import * as am5xy from "@amcharts/amcharts5/xy";
import am5themes_Animated from "@amcharts/amcharts5/themes/Animated";
import axios from "axios";

export default {
    name: "StackedBarChart",
    data() {
        return {
            chartData: [],
        };
    },
    mounted() {
        this.getProgressRate();
    },
    methods: {
        getProgressRate() {
            const vm = this;
            axios({
                url: "dashboard/progressRate.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    stdId: "1",
                },
            })
                .then(function (res) {
                    // console.log("Progress Rate - response : ", res.data);
                    vm.chartData = res.data;
                    // console.log(vm.chartData);
                    vm.createChart();
                })
                .catch(function (error) {
                    console.log("Progress Rate - error : ", error);
                });
        },

        createChart() {
            // Initialize root
            const root = am5.Root.new(this.$refs.StackedBarChart);

            // Apply themes
            const myTheme = am5.Theme.new(root);
            myTheme.rule("Grid", ["base"]).setAll({
                strokeOpacity: 0.1,
            });
            root.setThemes([am5themes_Animated.new(root), myTheme]);

            // Create chart
            const chart = root.container.children.push(
                am5xy.XYChart.new(root, {
                    panX: false,
                    panY: false,
                    wheelX: "panY",
                    wheelY: "zoomY",
                    paddingLeft: 0,
                    layout: root.verticalLayout,
                })
            );

            // Define data
            // const data = [
            //     {
            //         year: "2021",
            //         europe: 2.5,
            //         namerica: 2.5,
            //         asia: 2.1,
            //         lamerica: 1,
            //         meast: 0.8,
            //         africa: 0.4,
            //     },
            // ];

            // Create Y Axis
            const yRenderer = am5xy.AxisRendererY.new(root, {});
            const yAxis = chart.yAxes.push(
                am5xy.CategoryAxis.new(root, {
                    categoryField: "bookNm",
                    renderer: yRenderer,
                    tooltip: am5.Tooltip.new(root, {}),
                })
            );
            yRenderer.grid.template.setAll({
                location: 1,
            });
            yAxis.data.setAll(this.chartData);

            // Create X Axis
            const xAxis = chart.xAxes.push(
                am5xy.ValueAxis.new(root, {
                    min: 0,
                    maxPrecision: 0,
                    renderer: am5xy.AxisRendererX.new(root, {
                        minGridDistance: 40,
                        strokeOpacity: 0.1,
                    }),
                })
            );

            // Create legend
            // const legend = chart.children.push(
            //     am5.Legend.new(root, {
            //         centerX: am5.p50,
            //         x: am5.p50,
            //     })
            // );

            // Function to create series
            // const createSeries = (name, fieldName) => {
            //     const series = chart.series.push(
            //         am5xy.ColumnSeries.new(root, {
            //             name,
            //             stacked: true,
            //             xAxis,
            //             yAxis,
            //             baseAxis: yAxis,
            //             valueXField: fieldName,
            //             categoryYField: "year",
            //         })
            //     );

            //     series.columns.template.setAll({
            //         // tooltipText: "{name}, {categoryY}: {valueX}",
            //         tooltipY: am5.percent(90),
            //     });
            //     series.data.setAll(this.chartData);

            //     series.appear();

            //     series.bullets.push(() =>
            //         am5.Bullet.new(root, {
            //             sprite: am5.Label.new(root, {
            //                 text: "{valueX}",
            //                 fill: root.interfaceColors.get("alternativeText"),
            //                 centerY: am5.p50,
            //                 centerX: am5.p50,
            //                 populateText: true,
            //             }),
            //         })
            //     );

            //     legend.data.push(series);
            // };

            // Create series
            // createSeries("Europe", "europe");
            // createSeries("North America", "namerica");
            // createSeries("Asia", "asia");
            // createSeries("Latin America", "lamerica");
            // createSeries("Middle East", "meast");
            // createSeries("Africa", "africa");

            const series = chart.series.push(
                am5xy.ColumnSeries.new(root, {
                    name: "progressRate",
                    xAxis: xAxis,
                    yAxis: yAxis,
                    baseAxis: yAxis,
                    valueXField: "progressRate",
                    categoryYField: "bookNm",
                    // tooltipText: "{categoryY}: {valueX}",
                })
            );
            series.columns.template.setAll({
                tooltipY: am5.percent(90),
            });

            series.data.setAll(this.chartData);

            series.bullets.push(() =>
                am5.Bullet.new(root, {
                    sprite: am5.Label.new(root, {
                        text: "{valueX}",
                        fill: root.interfaceColors.get("alternativeText"),
                        centerY: am5.p50,
                        centerX: am5.p50,
                        populateText: true,
                    }),
                })
            );
            // Chart animation
            chart.appear(1000, 100);
        },
    },
};
</script>

<style scoped>
/* Add necessary styles here */
</style>
