<template>
    <div ref="Barchart" style="width: 500px; 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: "Barchart",
    data() {
        return {
            chartData: [],
        };
    },
    mounted() {
        this.getIncorrectRate();
    },
    methods: {
        getIncorrectRate() {
            const vm = this;
            axios({
                url: "dashboard/incorrectRateData.json",
                method: "post",
                headers: {
                    "Content-Type": "application/json; charset=UTF-8",
                },
                data: {
                    std_id: "1",
                },
            })
                .then(function (res) {
                    console.log("Inccorect Rate - response : ", res.data);
                    vm.chartData = res.data;
                    // console.log(vm.chartData);
                    vm.createChart();
                })
                .catch(function (error) {
                    console.log("Incorrect Rate - error : ", error);
                });
        },

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

            // 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
            let chart = root.container.children.push(
                am5xy.XYChart.new(root, {
                    panX: false,
                    panY: false,
                    wheelX: "none",
                    wheelY: "none",
                    paddingLeft: 0,
                })
            );

            // Create axes
            // https://www.amcharts.com/docs/v5/charts/xy-chart/axes/
            let yRenderer = am5xy.AxisRendererY.new(root, {
                minGridDistance: 30,
                minorGridEnabled: true,
            });
            yRenderer.grid.template.set("location", 1);

            let yAxis = chart.yAxes.push(
                am5xy.CategoryAxis.new(root, {
                    maxDeviation: 0,
                    categoryField: "bookNm",
                    renderer: yRenderer,
                })
            );

            let xAxis = chart.xAxes.push(
                am5xy.ValueAxis.new(root, {
                    maxDeviation: 0,
                    min: 0,
                    renderer: am5xy.AxisRendererX.new(root, {
                        visible: true,
                        strokeOpacity: 0.1,
                        minGridDistance: 80,
                    }),
                })
            );

            // Create series
            // https://www.amcharts.com/docs/v5/charts/xy-chart/series/
            let series = chart.series.push(
                am5xy.ColumnSeries.new(root, {
                    name: "Incorrect Rate",
                    xAxis: xAxis,
                    yAxis: yAxis,
                    valueXField: "incorrectRate",
                    sequencedInterpolation: true,
                    categoryYField: "bookNm",
                })
            );

            let columnTemplate = series.columns.template;

            columnTemplate.setAll({
                draggable: true,
                cursorOverStyle: "pointer",
                tooltipText: "{categoryY}: {valueX}",
                cornerRadiusBR: 10,
                cornerRadiusTR: 10,
                strokeOpacity: 0,
            });
            columnTemplate.adapters.add("fill", (fill, target) => {
                return chart
                    .get("colors")
                    .getIndex(series.columns.indexOf(target));
            });

            columnTemplate.adapters.add("stroke", (stroke, target) => {
                return chart
                    .get("colors")
                    .getIndex(series.columns.indexOf(target));
            });

            columnTemplate.events.on("dragstop", () => {
                this.sortCategoryAxis(series, yAxis, yRenderer);
            });

            // Get series item by category
            // function getSeriesItem(category) {
            //     for (var i = 0; i < series.dataItems.length; i++) {
            //         let dataItem = series.dataItems[i];
            //         if (dataItem.get("categoryY") == category) {
            //             return dataItem;
            //         }
            //     }
            // }

            // Axis sorting
            // function sortCategoryAxis() {
            //     // Sort by value
            //     series.dataItems.sort(function (x, y) {
            //         return y.get("graphics").y() - x.get("graphics").y();
            //     });

            //     let easing = am5.ease.out(am5.ease.cubic);

            //     // Go through each axis item
            //     am5.array.each(yAxis.dataItems, function (dataItem) {
            //         // get corresponding series item
            //         let seriesDataItem = getSeriesItem(
            //             dataItem.get("category")
            //         );

            //         if (seriesDataItem) {
            //             // get index of series data item
            //             let index = series.dataItems.indexOf(seriesDataItem);

            //             let column = seriesDataItem.get("graphics");

            //             // position after sorting
            //             let fy =
            //                 yRenderer.positionToCoordinate(
            //                     yAxis.indexToPosition(index)
            //                 ) -
            //                 column.height() / 2;

            //             // set index to be the same as series data item index
            //             if (index != dataItem.get("index")) {
            //                 dataItem.set("index", index);

            //                 // current position
            //                 let x = column.x();
            //                 let y = column.y();

            //                 column.set("dy", -(fy - y));
            //                 column.set("dx", x);

            //                 column.animate({
            //                     key: "dy",
            //                     to: 0,
            //                     duration: 600,
            //                     easing: easing,
            //                 });
            //                 column.animate({
            //                     key: "dx",
            //                     to: 0,
            //                     duration: 600,
            //                     easing: easing,
            //                 });
            //             } else {
            //                 column.animate({
            //                     key: "y",
            //                     to: fy,
            //                     duration: 600,
            //                     easing: easing,
            //                 });
            //                 column.animate({
            //                     key: "x",
            //                     to: 0,
            //                     duration: 600,
            //                     easing: easing,
            //                 });
            //             }
            //         }
            //     });

            // Sort axis items by index.
            // This changes the order instantly, but as dx and dy is set and animated,
            // they keep in the same places and then animate to true positions.
            //     yAxis.dataItems.sort(function (x, y) {
            //         return x.get("index") - y.get("index");
            //     });
            // }

            // Set data
            // let data = [
            //     {
            //         country: "USA",
            //         value: 2025,
            //     },
            //     {
            //         country: "China",
            //         value: 1882,
            //     },
            //     {
            //         country: "Japan",
            //         value: 1809,
            //     },
            //     {
            //         country: "Germany",
            //         value: 1322,
            //     },
            //     {
            //         country: "UK",
            //         value: 1122,
            //     },
            // ];

            // yAxis.data.setAll(data);
            // series.data.setAll(data);

            yAxis.data.setAll(this.chartData);
            series.data.setAll(this.chartData);

            // Make stuff animate on load
            // https://www.amcharts.com/docs/v5/concepts/animations/
            series.appear(1000);
            chart.appear(1000, 100);
        },
        sortCategoryAxis(series, yAxis, yRenderer) {
            // Sort by value
            series.dataItems.sort((x, y) => {
                return y.get("graphics").y() - x.get("graphics").y();
            });

            let easing = am5.ease.out(am5.ease.cubic);

            // Go through each axis item
            am5.array.each(yAxis.dataItems, function (dataItem) {
                // get corresponding series item
                let seriesDataItem = series.dataItems.find(
                    (dataItem) =>
                        dataItem.get("categoryY") == dataItem.get("category")
                );

                if (seriesDataItem) {
                    // get index of series data item
                    let index = series.dataItems.indexOf(seriesDataItem);

                    let column = seriesDataItem.get("graphics");

                    // position after sorting
                    let fy =
                        yRenderer.positionToCoordinate(
                            yAxis.indexToPosition(index)
                        ) -
                        column.height() / 2;

                    // set index to be the same as series data item index
                    if (index != dataItem.get("index")) {
                        dataItem.set("index", index);

                        // current position
                        let x = column.x();
                        let y = column.y();

                        column.set("dy", -(fy - y));
                        column.set("dx", x);

                        column.animate({
                            key: "dy",
                            to: 0,
                            duration: 600,
                            easing: easing,
                        });
                        column.animate({
                            key: "dx",
                            to: 0,
                            duration: 600,
                            easing: easing,
                        });
                    } else {
                        column.animate({
                            key: "y",
                            to: fy,
                            duration: 600,
                            easing: easing,
                        });
                        column.animate({
                            key: "x",
                            to: 0,
                            duration: 600,
                            easing: easing,
                        });
                    }
                }
            });
            yAxis.dataItems.sort((x, y) => {
                return x.get("index") - y.get("index");
            });
        },
    },
};
</script>

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