let Dashboard = {
    init: function (options) {
        Dashboard.methods.initChartSpace(options.media_size, options.asset_size, options.imag_size, options.other_size);
        Dashboard.methods.initChartSpaceS3(options.s3_media_size, options.s3_asset_size);
        Dashboard.methods.initChartSpaceS3Disk(options.media_size, options.asset_size, options.imag_size, options.other_size, options.s3_media_size, options.s3_asset_size);
    },
    methods: {
        initChartSpaceS3Disk: function (media_size, asset_size, imag_size, other_size, s3_media_size, s3_asset_size) {
            let config = {
                type: "pie",
                data: {
                    labels: [
                        "Multimedia",
                        "Imágenes",
                        "Adjuntos",
                        "Otros",
                        "Multimedia S3",
                        "Adjuntos S3"
                    ],
                    datasets: [{
                        data: [
                            media_size,
                            asset_size,
                            imag_size,
                            other_size,
                            s3_media_size,
                            s3_asset_size
                        ],
                        backgroundColor: [
                            window.chartJsColors["media_size"],
                            window.chartJsColors["imag_size"],
                            window.chartJsColors["asset_size"],
                            window.chartJsColors["other_size"],
                            window.chartJsColors["s3_media_size"],
                            window.chartJsColors["s3_asset_size"]
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            enabled: true,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ": " + Dashboard.helper.formatBytes(context.raw);
                                }
                            }
                        },
                        datalabels: {
                            formatter: function (value) {
                                return  Dashboard.helper.formatBytes(value);
                            },
                            color: "#fff",
                        }
                    }
                }
            };

            if (document.getElementById('chart-space-s3-disk') != null) {
                let ctx = document.getElementById('chart-space-s3-disk').getContext('2d');

                Chart.register(ChartDataLabels);
                let chart2 = new Chart(ctx, config);
            }
        },
        initChartSpaceS3: function (s3_media_size, s3_asset_size) {
            let config = {
                type: "pie",
                data: {
                    labels: [
                        "Multimedia",
                        "Adjuntos",
                    ],
                    datasets: [{
                        data: [
                            s3_media_size,
                            s3_asset_size,
                        ],
                        backgroundColor: [
                            window.chartJsColors["s3_media_size"],
                            window.chartJsColors["s3_asset_size"]
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            enabled: true,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ": " + Dashboard.helper.formatBytes(context.raw);
                                }
                            }
                        },
                        datalabels: {
                            formatter: function (value) {
                                return  Dashboard.helper.formatBytes(value);
                            },
                            color: "#fff",
                        }
                    }
                }
            };

            if (document.getElementById('chart-space-s3') != null) {
                let ctx = document.getElementById('chart-space-s3').getContext('2d');

                Chart.register(ChartDataLabels);
                let chart2 = new Chart(ctx, config);
            }
        },
        initChartSpace: function (media_size, asset_size, imag_size, other_size) {
            let config = {
                type: "pie",
                data: {
                    labels: [
                        "Multimedia",
                        "Adjuntos",
                        "Imágenes",
                        "Otros"
                    ],
                    datasets: [{
                        data: [
                            media_size,
                            asset_size,
                            imag_size,
                            other_size
                        ],
                        backgroundColor: [
                            window.chartJsColors["media_size"],
                            window.chartJsColors["asset_size"],
                            window.chartJsColors["imag_size"],
                            window.chartJsColors["other_size"]
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        tooltip: {
                            enabled: true,
                            callbacks: {
                                label: function(context) {
                                    return context.label + ": " + Dashboard.helper.formatBytes(context.raw);
                                }
                            }
                        },
                        datalabels: {
                            formatter: function (value) {
                                return  Dashboard.helper.formatBytes(value);
                            },
                            color: "#fff",
                        }
                    }
                }
            };

            if (document.getElementById('chart-space') != null) {
                let ctx = document.getElementById('chart-space').getContext('2d');

                Chart.register(ChartDataLabels);
                let chart1 = new Chart(ctx, config);
            }
        }
    },
    helper: {
        formatBytes: function (bytes) {
            if (bytes === 0) return '0 Bytes';

            const k = 1024;
            const dm = 2;
            const sizes = ['Bytes', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];

            const i = Math.floor(Math.log(bytes) / Math.log(k));

            return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
        }
    }
};
