import { WorldTopoData as topology } from './HighChartConfigData';

export const getDefaultConfigurations = (chartType: string, inputData: any[], colors: string[]) => {
    const colorLength = colors?.length;
    let colorIndex = 0;
    switch (chartType) {
        case 'bar':
            const categories: string[] = [];
            const barData: number[] = [];

            inputData.forEach((item) => {
                categories.push(item.name);
                barData.push(item.value);
            });

            return {
                chart: {
                    type: 'bar',
                },
                credits: {
                    enabled: false,
                },
                title: {
                    text: '',
                },
                plotOptions: {
                    bar: {
                        pointWidth: 26,
                    },
                },
                xAxis: {
                    categories: categories,
                    lineWidth: 0,
                    labels: {
                        style: {
                            fontFamily: 'Helvetica Neue, Helvetica, Arial, -apple-system, system-ui, sans-serif',
                            fontSize: 16,
                            fontWeight: 400,
                        },
                    },
                },
                yAxis: {
                    title: {
                        text: 'Impacted Users',
                        margin: 15,
                        style: {
                            color: '#26333F',
                            opacity: 0.4,
                        },
                    },
                    labels: {
                        style: {
                            fontFamily: 'Helvetica Neue, Helvetica, Arial, -apple-system, system-ui, sans-serif',
                            color: '#26333F',
                            opacity: 0.4,
                        },
                    },
                },
                series: [
                    {
                        showInLegend: false,
                        data: barData,
                    },
                ],
            };

        case 'packedbubble':
            inputData?.sort((a, b) => b.value - a.value);
            const bubbleData: any[] = [];
            inputData.forEach((item) => {
                bubbleData.push({
                    name: item.name,
                    value: item.value,
                    color: colors[colorIndex],
                });

                colorIndex = (colorIndex + 1) % colorLength;
            });
            return {
                chart: {
                    type: 'packedbubble',
                    events: {
                        load: function (this: any) {
                            var chart = this;
                            chart.series[0].points.forEach(function (point: {
                                marker: { radius: number };
                                update: (arg0: { dataLabels: { style: { width: string } } }, arg1: boolean) => void;
                            }) {
                                var bubbleWidth = 2 * point.marker.radius - 15; // Calculate width based on bubble size
                                point.update(
                                    {
                                        dataLabels: {
                                            style: {
                                                width: bubbleWidth + 'px',
                                            },
                                        },
                                    },
                                    false
                                ); // Update dataLabels without reflowing the chart
                            });
                            chart.redraw(); // Redraw the chart with updated dataLabels
                        },
                    },
                },
                credits: {
                    enabled: false,
                },
                title: {
                    text: '',
                },
                tooltip: {
                    enabled: true,
                    useHTML: true,
                    padding: 0,
                    formatter: function (this: any) {
                        return (
                            '<div class="ai-highchart-tooltip"><div class="inner">' +
                            this.point.name +
                            ':' +
                            this.point.value +
                            '</div></div>'
                        );
                    },
                },
                plotOptions: {
                    packedbubble: {
                        layoutAlgorithm: {
                            bubblePadding: 10,
                        },
                        stroke: 'none',
                        strokeWidth: 0,
                        minSize: '35%',
                        maxSize: '125%',

                        // padding: 5,
                        // paddingInner: 5,
                        // paddingOuter: 5,
                        stickyTracking: false,
                        // zMin: bubbleData[bubbleData?.length - 1]?.value,
                        // zMax: bubbleData[0]?.value,
                        // zMin: 0,
                        // zMax: 10000,

                        dataLabels: {
                            enabled: true,
                            // format:
                            // '<span style="font-weight: 400; font-size: 12px;">{point.name}</span><br><br><span style=" font-weight: 500;  font-size: 20px;">{point.value}</span>',

                            // format: function (this: any) {
                            //     return `<span style="font-weight: 400; font-size: 12px;">{point.name}</span><br><br>
                            //     <span style=" font-weight: 500;  font-size: 20px;">${this.point.value > 1000 ? ((this.point.value / 1000, 0)+ 'K') : this.point.value }</span>`;
                            //   },

                            formatter: function (this: any) {
                                var rad = this.point.marker.radius;

                                const minFontSize = 8;
                                const maxFontSize = 24;
                                const minRadius = 10;
                                const maxRadius = 60;

                                let valueFontSize =
                                    minFontSize +
                                    ((rad - minRadius) * (maxFontSize - minFontSize)) / (maxRadius - minRadius);
                                let labelFontSize = 10;
                                let margin_top = 6;

                                // var fontSize = 10 + (this.point.marker.radius / 10);
                                if (valueFontSize <= 11.5) {
                                    valueFontSize = 6;
                                    labelFontSize = 7;
                                    margin_top = 0;
                                }

                                return `
                                    <span style="font-weight: 400; font-size: ${labelFontSize + 'px'};">${this.point.name}</span>
                                    <div style="margin-top: ${margin_top + 'px'}"><div>
                                    <span style=" font-weight: 500;  font-size: ${valueFontSize + 'px'};">${this.point.value >= 1000 ? (this.point.value % 1000 === 0 ? this.point.value / 1000 + 'K' : (this.point.value / 1000).toFixed(1) + 'K') : this.point.value}</span>
                                 `;
                            },

                            useHTML: true,
                            textPath: {
                                enabled: true,
                            },
                            style: {
                                color: '#ffffff',
                                textAlign: 'center',
                                textOverflow: 'ellipsis',
                            },
                        },
                    },
                },

                series: [
                    {
                        name: 'Data',
                        showInLegend: false,
                        marker: {
                            fillOpacity: 1,
                        },
                        data: bubbleData,
                    },
                ],
            };

        case 'mapbubble':
            inputData?.sort((a, b) => b.value - a.value);
            const mapBubbleData: any[] = [];
            inputData.forEach((item) => {
                mapBubbleData.push({
                    code3: item.country,
                    z: item.value,
                    color: colors[colorIndex],
                });

                colorIndex = (colorIndex + 1) % colorLength;
            });
            return {
                chart: {
                    map: topology,
                },
                credits: {
                    enabled: false,
                },
                title: {
                    text: '',
                },

                accessibility: {
                    description: '',
                },

                legend: {
                    enabled: false,
                },

                mapNavigation: {
                    enabled: true,
                    // buttonOptions: {
                    //     verticalAlign: "bottom",
                    // },
                    enableButtons: false,
                },

                plotOptions: {
                    mapbubble: {
                        enabled: true,
                        marker: {
                            fillOpacity: 0.6,
                        },
                        stickyTracking: false,
                    },
                    useHTML: true,
                },

                tooltip: {
                    enabled: true,
                    padding: 0,
                    borderWidth: 0,
                    useHTML: true,
                    formatter: function (this: any) {
                        console.log(this.point);
                        return (
                            '<div class="ai-highchart-tooltip"><div class="inner">' +
                            this.point.properties.name +
                            ':' +
                            this.point.z +
                            '</div></div>'
                        );
                    },
                },

                mapView: {
                    fitToGeometry: {
                        type: 'MultiPoint',
                        coordinates: [
                            // Alaska west
                            [-164, 54],
                            // Greenland north
                            [-35, 84],
                            // New Zealand east
                            [179, -38],
                            // Chile south
                            [-68, -55],
                        ],
                    },
                },

                series: [
                    {
                        name: '',
                        nullColor: '#d1d1d1',
                        enableMouseTracking: false,
                        borderWidth: 0,

                        states: {
                            hover: {
                                color: null,
                                borderColor: null,
                            },
                            inactive: {
                                enabled: false,
                            },
                            borderColor: 'red',
                        },
                    },
                    {
                        type: 'mapbubble',

                        name: '',
                        joinBy: ['iso-a3', 'code3'],
                        states: {
                            inactive: {
                                opacity: 1,
                            },
                        },
                        data: mapBubbleData,
                        // minSize: 30,
                        // maxSize: '20%',
                        minSize: 20,
                        maxSize: 60,
                        tooltip: {
                            pointFormat: '{point.properties.name}: {point.z} ',
                        },
                        dataLabels: {
                            enabled: true,
                            useHTML: true,
                            formatter: function (this: any) {
                                const rad = this.point.marker.radius;
                                const minFontSize = 12;
                                const maxFontSize = 30;
                                const minRadius = 20;
                                const maxRadius = 60;

                                let valueFontSize =
                                    minFontSize +
                                    ((rad - minRadius) * (maxFontSize - minFontSize)) / (maxRadius - minRadius);
                                return `<span style="font-size: ${valueFontSize + 'px'}">${this.point.z >= 1000 ? (this.point.z % 1000 === 0 ? this.point.z / 1000 + 'K' : (this.point.z / 1000).toFixed(1) + 'K') : this.point.z}</span>`;
                            },
                            style: {
                                color: '#26333F',
                                textOutline: 'none',
                                textAlign: 'center',
                                fontFamily: ' Helvetica Neue, Helvetica, Arial, -apple-system, system-ui, sans-serif ',
                                fontWeight: 700,
                            },
                        },
                    },
                ],
            };

        case 'wordcloud':
            inputData?.sort((a, b) => b.count - a.count);
            const wordCloudData: any[] = [];
            inputData.forEach((item) => {
                wordCloudData.push({
                    name: item.name,
                    weight: item.count,
                    color: colors[colorIndex],
                });

                colorIndex = (colorIndex + 1) % colorLength;
            });
            return {
                chart: {
                    type: 'wordcloud',
                },
                credits: {
                    enabled: false,
                },
                title: {
                    text: '',
                },
                tooltip: {
                    formatter: function (this: any) {
                        return `<b>${this.point.name}</b>: ${this.point.weight}`;
                    },
                },
                series: [
                    {
                        type: 'wordcloud',
                        style: {
                            fontFamily: ' Helvetica Neue, Helvetica, Arial, -apple-system, system-ui, sans-serif ',
                            fontWeight: 500,
                        },
                        data: wordCloudData,
                        rotation: {
                            from: 0,
                            to: 0,
                            orientations: 1,
                            distance: 50,
                        },
                        dataLabels: {
                            rotation: 0,
                            overflow: 'justify',
                        },
                        maxFontSize: 36,
                        minFontSize: 8,
                    },
                ],
            };

        default:
            return {};
    }
};