"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const highcharts_1 = require("@internal/highcharts");
const shared_1 = require("../../common/charts/shared");
const donut_1 = require("../../common/charts/donut");
const donut_tooltip_marko_1 = __importDefault(require("./donut-tooltip.marko"));
class DonutChart {
    // Handle CDN Loader errors
    handleError(err) {
        this.emit("load-error", err);
    }
    // Handle CDN Loader success
    handleSuccess() {
        this._initializeHighchartsExtensions();
        this._setupChart();
    }
    onMount() {
        (0, highcharts_1.load)()
            .then(() => {
            this.handleSuccess();
        })
            .catch((e) => {
            this.handleError(e);
        });
    }
    /**
     * Generate a unique id for the container element.
     *
     * @returns {string} The id of the container element
     */
    getContainerId() {
        return `ebay-donut-graph-${this.id}`;
    }
    /**
     * Initializes highcharts extensions
     */
    _initializeHighchartsExtensions() {
        // Adds spacing between donut slices
        (0, donut_1.ebayDonut)(Highcharts);
    }
    /**
     * Set up the chart with the input data and configuration options.
     */
    _setupChart() {
        var _a;
        // Set default type to "pie"
        const series = (_a = this.input.series) === null || _a === void 0 ? void 0 : _a.map((series) => (Object.assign(Object.assign({}, series), { type: series.type || "pie" })));
        // Check series length, DS only supports one series
        if (series.length > 1) {
            console.warn("Donut chart only supports one series");
        }
        // Set the path colors and border colors for the series data
        const colors = (0, shared_1.setDonutColors)(series[0]);
        const chart = this.getChartConfig();
        const plotOptions = this.getPlotOptions();
        const tooltip = this.getTooltipConfig();
        const config = {
            chart,
            colors,
            title: {
                text: undefined,
            },
            plotOptions,
            series,
            tooltip,
            credits: {
                enabled: false,
            },
        };
        this.chartRef = Highcharts.chart(this.getContainerId(), config);
    }
    /**
     * Chart configuration options: configures the chart type, background color, font family, events.
     *
     * @returns {Highcharts.ChartOptions}
     */
    getChartConfig() {
        return {
            type: "pie",
            spacing: [0, 0, 0, 0],
            margin: [0, 0, 0, 0],
            backgroundColor: shared_1.backgroundColor,
            style: {
                fontFamily: shared_1.chartFontFamily,
            },
        };
    }
    /**
     * Configures the pie plot options: thickness.
     *
     * @returns {Highcharts.PlotOptions}
     */
    getPlotOptions() {
        return {
            pie: {
                description: this.input.highchartsDescription,
                size: "100%",
                thickness: 10,
                allowPointSelect: false,
                cursor: "pointer",
                borderRadius: "30%",
                dataLabels: {
                    enabled: false,
                },
                states: {
                    hover: {
                        halo: { size: 0 },
                    },
                },
            },
        };
    }
    /**
     * Format tooltip to match design specs.
     *
     * @returns {Highcharts.TooltipOptions}
     */
    getTooltipConfig() {
        return {
            formatter: function (a) {
                return donut_tooltip_marko_1.default.renderToString({
                    name: this.name,
                    value: `${this.y}`,
                });
            },
            hideDelay: 250,
            useHTML: true,
            backgroundColor: "transparent",
            padding: 0,
            borderWidth: 0,
            borderRadius: 0,
            outside: true,
            shadow: false,
            shared: true,
            style: {
                fontSize: "12px",
            },
        };
    }
    /**
     * Returns the legend items for the chart.
     *
     * @returns {LegendItem[]}
     */
    getLegendItems() {
        const { series } = this.input;
        return series[0].data.map((point) => {
            return {
                name: point.name,
                value: point.y,
            };
        });
    }
}
module.exports = DonutChart;
