import { Utils } from 'arm-common';
import p from 'prop-types';
import React, { useLayoutEffect, useState } from 'react';

import { ChartContainer, getRoot, useAm5, useAm5Colors } from '../Am5.jsx';


const classNamePrefix = 'armu_ai_chatbot-line-chart';

export default function LineChart(props) {
    const { id, xAxis, yAxis, series, data } = props;

    const [chartId] = useState(id || Utils.uuid(classNamePrefix));
    const am5 = useAm5();
    const am5Colors = useAm5Colors();

    useLayoutEffect(() => {
        if (am5 && data) {
            const root = getRoot(chartId);

            const chart = root.container.children.push(
                am5xy.XYChart.new(root, {
                    panX: true,
                    panY: true,
                    layout: root.verticalLayout
                })
            );

            const cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
                behavior: "none"
            }));
            cursor.lineY.set("visible", false);


            const xAxisAm5 = chart.xAxes.push(
                am5xy.ValueAxis.new(root, {
                    renderer: am5xy.AxisRendererX.new(root, {
                        minGridDistance: 50
                    }),
                    tooltip: am5.Tooltip.new(root, {})
                })
            );

            const yAxisAm5 = chart.yAxes.push(
                am5xy.ValueAxis.new(root, {
                    renderer: am5xy.AxisRendererY.new(root, {}),
                })
            );

            chart.set("colors", am5.ColorSet.new(root, {
                colors: am5Colors
            }));

            if (series?.length){
                const legend = chart.children.push(am5.Legend.new(root, {
                    centerX: am5.p50,
                    x: am5.p50,
                }));
                
                series.forEach(addSeries.bind({ root, chart, legend, xAxisAm5, yAxisAm5, xAxis, data }));

                legend.data.setAll(chart.series.values);
            } else if (yAxis){
                addSeries.call({ root, chart, xAxisAm5, yAxisAm5, xAxis, data }, { yAxis });
            }
        }
    }, [am5, data]);

    return (
        <ChartContainer id={chartId} className={classNamePrefix} />
    );
}

LineChart.defaultProps = {
    id: '',
    xAxis: '',
    yAxis: '',
    series: [],
    data: null
}

LineChart.propTypes = {
    id: p.string,
    xAxis: p.string.isRequired,
    yAxis: p.string,
    series: p.arrayOf(p.shape({
        name: p.string,
        yAxis: p.string
    })).isRequired,
    data: p.arrayOf(p.object).isRequired
}

function addSeries(seriesConfig) {
    const { root, chart, xAxisAm5, yAxisAm5, xAxis, data } = this;

    const { name, yAxis } = seriesConfig;

    const tooltip = am5.Tooltip.new(root, {
        labelText: "{valueY}",
    });

    const series = chart.series.push(
        am5xy.LineSeries.new(root, {
            name,
            minBulletDistance: 10,
            xAxis: xAxisAm5,
            yAxis: yAxisAm5,
            valueXField: xAxis,
            valueYField: yAxis,
            tooltip
        })
    );

    series.bullets.push(function () {
        return am5.Bullet.new(root, {
            sprite: am5.Circle.new(root, {
                radius: 6,
                fill: series.get("fill"),
                stroke: root.interfaceColors.get("background"),
                strokeWidth: 2,
            })
        });
    });

    series.data.setAll(data);
}