import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect } from 'react';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import styled from 'styled-components';
import { DataUtilities } from '../../Common/DataUtilities';
export const NumberFormatter = {
    Currency: '##,###.00',
    BigNumber: '#.#a',
    Byte: '#.#b',
    Percent: '#.#%'
};
const Chart = (props) => {
    const id = DataUtilities.generateUniqueId();
    const getSeries = (series, value, category, options) => {
        if (options.colorType === 'Custom') {
            if (value !== 'value') {
                series.columns.template.propertyFields.fill = value + "_color";
                series.columns.template.propertyFields.stroke = value + "_color";
            }
            else {
                if (options.chartType !== 'PieChart') {
                    series.columns.template.propertyFields.fill = "color";
                    series.columns.template.propertyFields.stroke = "color";
                }
                else {
                    series.slices.template.propertyFields.fill = "color";
                    series.slices.template.propertyFields.stroke = "color";
                }
            }
        }
        else if (options.colorType === 'Mono') {
            series.columns.template.fill = options.color;
            series.columns.template.stroke = options.color;
        }
        if (options.showToolTip) {
            if (options.chartType !== 'PieChart') {
                series.columns.template.tooltipPosition = "pointer";
                series.columns.template.tooltipText = "{name} {categoryX}: {valueY}";
            }
        }
        else {
            if (options.chartType === 'PieChart') {
                series.tooltip.disabled = true;
            }
        }
        if (!options.showLabel) {
            if (options.chartType === 'PieChart') {
                series.labels.template.disabled = true;
            }
        }
        if (options.stackBars) {
            series.stacked = true;
        }
        if (options.chartType !== 'PieChart') {
            series.dataFields.categoryX = category;
            series.dataFields.valueY = value;
        }
        else {
            series.dataFields.category = category;
            series.dataFields.value = value;
            if (options.customRadius) {
                series.dataFields.radiusValue = "radius";
            }
        }
        return series;
    };
    const createGrid = (valueAxis, value) => {
        let range = valueAxis.axisRanges.create();
        range.value = value;
        range.label.text = "{value}";
    };
    const valueAxisSettings = (valueAxis, options) => {
        if (options.value) {
            valueAxis.title.text = options.value;
        }
        if (options.setLowerBounds) {
            valueAxis.strictMinMax = true;
            valueAxis.min = options.lowerBounds;
        }
        if (options.setUpperBounds) {
            valueAxis.strictMinMax = true;
            valueAxis.max = options.upperBounds;
        }
        if (!options.showXYAxis) {
            valueAxis.renderer.labels.template.disabled = true;
        }
        if (!options.showIncrements) {
            valueAxis.renderer.grid.template.disabled = true;
            valueAxis.renderer.labels.template.disabled = true;
        }
        else {
            if (options.setLowerBounds && options.setUpperBounds) {
                valueAxis.renderer.grid.template.disabled = true;
                valueAxis.renderer.labels.template.disabled = true;
                const increment = parseInt(options.increment);
                for (let i = options.lowerBounds; i <= options.upperBounds; i += increment) {
                    createGrid(valueAxis, i);
                }
            }
        }
        return valueAxis;
    };
    const categoryAxisSettings = (categoryAxis, options) => {
        categoryAxis.dataFields.category = 'label';
        if (options.category) {
            categoryAxis.title.text = options.category;
        }
        if (!options.showXYAxis) {
            categoryAxis.renderer.labels.template.disabled = true;
        }
    };
    useEffect(() => {
        const { options } = props;
        let chart = null;
        am4core.useTheme(am4themes_animated);
        let series = null;
        if (options.chartType === 'LineChart' || options.chartType === 'BarChart') {
            if (options.show3D) {
                chart = am4core.create(id, am4charts.XYChart3D);
            }
            else {
                chart = am4core.create(id, am4charts.XYChart);
            }
            if (options.cursor) {
                chart.cursor = new am4charts.XYCursor();
            }
            if (options.numberFormatter !== 'Normal' && options.numberFormatter !== 'Custom') {
                // @ts-ignore
                chart.numberFormatter.numberFormat = NumberFormatter[options.numberFormatter];
            }
            else if (options.numberFormatter === 'Custom') {
                chart.numberFormatter.numberFormat = options.customNumberFormatter;
            }
            const xAxis = chart.xAxes.push(new am4charts.CategoryAxis());
            const yAxis = chart.yAxes.push(new am4charts.ValueAxis());
            categoryAxisSettings(xAxis, options);
            valueAxisSettings(yAxis, options);
            if (options.allowSeries) {
                for (const seriesName of options.seriesNames) {
                    let series = null;
                    if (options.show3D) {
                        series = chart.series.push(new am4charts.ColumnSeries3D());
                    }
                    else {
                        series = chart.series.push(new am4charts.ColumnSeries());
                    }
                    series.name = seriesName[0].toUpperCase() + seriesName.slice(1).toLowerCase();
                    getSeries(series, seriesName, 'label', options);
                }
            }
            else {
                let series = null;
                if (options.show3D) {
                    series = chart.series.push(new am4charts.ColumnSeries3D());
                }
                else {
                    series = chart.series.push(new am4charts.ColumnSeries());
                }
                getSeries(series, 'value', 'label', options);
            }
        }
        else {
            if (options.show3D) {
                chart = am4core.create(id, am4charts.PieChart3D);
                series = chart.series.push(new am4charts.PieSeries3D());
            }
            else {
                chart = am4core.create(id, am4charts.PieChart);
                series = chart.series.push(new am4charts.PieSeries());
            }
            if (options.isDonut) {
                chart.innerRadius = options.innerRadius;
            }
            getSeries(series, 'value', 'label', options);
        }
        if (options.legendPosition && options.legendPosition !== 'no') {
            chart.legend = new am4charts.Legend();
            chart.legend.useDefaultMarker = true;
            if (options.legendPosition) {
                chart.legend.position = options.legendPosition;
            }
        }
        if (options.allowSeries) {
            const { data } = options;
            if (options.seriesDataType === 'Non Nested') {
                const keys = Object.keys(data);
                const dataSet = data[keys[0]];
                const dataLength = dataSet.length;
                const newData = [];
                const firstKey = keys[0];
                for (let i = 0; i < dataLength; i++) {
                    const newDataItem = keys.map((key) => {
                        const dataItem = data[key][i];
                        const parsedData = {};
                        parsedData[key] = dataItem.value;
                        if (dataItem.color) {
                            parsedData[key + '_color'] = dataItem.color;
                        }
                        return parsedData;
                    }).reduce((previousValue, currentValue) => { return Object.assign(Object.assign({}, previousValue), currentValue); });
                    newDataItem['label'] = data[firstKey][i].label;
                    newData.push(newDataItem);
                }
                chart.data = newData;
            }
            else {
                if (options.colorType === 'Custom') {
                    chart.data = data.map((dataItem) => {
                        const newDataItem = {};
                        for (const key in dataItem) {
                            if (key === 'label') {
                                newDataItem[key] = dataItem[key];
                            }
                            else {
                                newDataItem[key] = dataItem[key].value;
                                newDataItem[key + '_color'] = dataItem[key].color;
                            }
                        }
                        return newDataItem;
                    });
                }
                else {
                    chart.data = data;
                }
            }
        }
        else {
            chart.data = options.data;
        }
        return () => {
            chart.dispose();
        };
    });
    return (_jsx(ChartDiv, { id: id, "data-testid": "chart-container" }, void 0));
};
const ChartDiv = styled.div `
    width: 100%;
    height: 300px;
`;
export default Chart;
//# sourceMappingURL=Chart.js.map