var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { implementRuntimeComponent } from '@subscan/widget-runtime';
import { css } from '@emotion/css';
import { Type } from '@sinclair/typebox';
import { FALLBACK_METADATA, getComponentProps } from 'utils/widget-helper';
import { COMPONENTS_CATEGORY, VERSION } from 'config/constants';
import { useCallback, useEffect, useMemo, useState } from 'react';
import './Init';
import * as echarts from 'echarts/core';
import { ElementResizeListener } from 'components';
// import { ChartPropsSpec as BaseChartPropsSpec } from './types/Chart';
import { filterProperties } from './object';
import { useTheme } from 'styled-components';
import { LineChartPropsSpec } from './types/Line';
var ChartPropsSpec = Type.Object(__assign({}, LineChartPropsSpec));
var exampleProperties = {
    xAxis: [
        {
            // name: '',
            type: 'category',
            data: ['Dimension 1', 'Dimension 2', 'Dimension 3'],
            // nameLocation: 'center',
            // offset: 0,
            position: 'bottom',
        },
    ],
    yAxis: [
        {
            // name: '',
            type: 'value',
            data: [],
            // nameLocation: 'center',
            // offset: 0,
            position: 'left',
        },
    ],
    series: [
        {
            name: 'Series 1',
            label: {
                show: false,
                position: 'top',
            },
            data: [1, 2, 10],
            symbol: 'circle',
            showSymbol: true,
            smooth: true,
            activeAreaStyle: true,
        },
        {
            name: 'Series 2',
            label: {
                show: false,
                position: 'top',
            },
            data: [10, 20, 15],
            symbol: 'circle',
            showSymbol: true,
            smooth: true,
            activeAreaStyle: true,
        },
    ],
    color: [],
};
export var ChartLine = implementRuntimeComponent({
    version: VERSION.Core,
    metadata: __assign(__assign({}, FALLBACK_METADATA), { name: 'chart', displayName: 'Line Chart', exampleProperties: exampleProperties, annotations: {
            category: COMPONENTS_CATEGORY.Chart,
        } }),
    spec: {
        properties: ChartPropsSpec,
        state: {},
        methods: {},
        slots: {},
        styleSlots: ['content'],
        events: ['onClick'],
    },
})(function (props) {
    var _a = getComponentProps(props), yAxis = _a.yAxis, xAxis = _a.xAxis, series = _a.series, color = _a.color, cProps = __rest(_a, ["yAxis", "xAxis", "series", "color"]);
    var elementRef = props.elementRef, customStyle = props.customStyle, callbackMap = props.callbackMap;
    var theme = useTheme();
    var _b = useState(), chart = _b[0], SetChart = _b[1];
    var adaptResize = useCallback(function () {
        if (chart) {
            chart.resize();
        }
    }, [chart]);
    var option = useMemo(function () {
        var filterOption = filterProperties({
            yAxis: yAxis,
            xAxis: xAxis,
            series: series,
            color: color,
        }, function (option, key, path) {
            var value = option[key];
            if (value !== undefined && value !== '') {
                var strPath = path.join('.');
                var checkedEmptyArrayProperties = ['color', 'legend.data'];
                if (checkedEmptyArrayProperties.includes(strPath) && Array.isArray(value)) {
                    return value.length !== 0;
                }
                else {
                    return true;
                }
            }
            return false;
        }, { deep: true });
        return {
            grid: {
                top: '30',
                left: '50',
                right: '20',
                bottom: '80',
                containLabel: false,
            },
            // https://echarts.apache.org/en/option.html#dataZoom
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    start: 0,
                    end: 100,
                    xAxisIndex: [0],
                },
            ],
            tooltip: {
                trigger: 'axis',
                triggerOn: 'mousemove',
                textStyle: {
                    color: theme.colors.primary,
                },
                padding: 10,
                backgroundColor: theme.colors.contrast,
                extraCssText: 'box-shadow: rgb(0 0 0 / 20%) 1px 2px 10px;',
            },
            xAxis: filterOption.xAxis.map(function (item) {
                return __assign({ 
                    // type: "category",
                    show: true, boundaryGap: false, 
                    // data: xAxisData,
                    axisLine: {
                        onZero: false,
                        show: true,
                        lineStyle: {
                            color: theme.colors.primary,
                            opacity: 0,
                            width: 3,
                        },
                    }, axisLabel: {
                        margin: 16,
                    }, axisTick: {
                        show: false,
                    } }, item);
            }),
            yAxis: filterOption.yAxis.map(function (item) {
                return __assign({ show: true, splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: '#E7EAF3',
                        },
                    }, axisLine: {
                        onZero: false,
                        show: true,
                        lineStyle: {
                            opacity: 0,
                            width: 3,
                        },
                    }, axisLabel: {}, axisTick: {
                        show: false,
                    } }, item);
            }),
            series: filterOption.series.map(function (item, index) {
                return __assign(__assign({ type: 'line', itemStyle: {
                        borderWidth: 4,
                    }, lineStyle: {
                        width: 1.5,
                    }, emphasis: {
                        disabled: true,
                    } }, item), { areaStyle: item.activeAreaStyle
                        ? {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: (filterOption.color || [])[index] || theme.chain.color || theme.colors.primary,
                                },
                                {
                                    offset: 1,
                                    color: '#ffffff',
                                },
                            ]),
                        }
                        : null });
            }),
            color: filterOption.color
                ? filterOption.color
                : filterOption.series.map(function () { return theme.chain.color || theme.colors.primary; }),
        };
        // const uiOptions = getAreaChartOptions(theme);
        // Object.keys(uiOptions).forEach((key) => {
        //   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
        //   // @ts-ignore
        //   const uiOption = uiOptions[key];
        //   if (uiOption) {
        //     if(key === 'series' || key === 'xAxis' || key === 'yAxis') {
        //       filterOption[key].forEach((item, index) => {
        //         filterOption[key][index] = {
        //           ...uiOption[0],
        //           ...item,
        //         };
        //       });
        //     } else {
        //       filterOption[key as keyof typeof filterOption] = isArray(uiOption) ? [
        //         ...uiOption,
        //         ...(filterOption[key as keyof typeof filterOption] || [])
        //       ] : {
        //         ...uiOption,
        //         ...(filterOption[key as keyof typeof filterOption] || {})
        //       };
        //     }
        //   }
        // });
        // return filterOption;
    }, [yAxis, xAxis, series, color, theme]);
    useEffect(function () {
        if (!elementRef)
            return;
        var myChart = echarts.init(elementRef === null || elementRef === void 0 ? void 0 : elementRef.current, undefined, { renderer: 'svg' });
        myChart.clear();
        myChart.setOption(__assign({}, option));
        SetChart(myChart);
    }, [elementRef, option]);
    return (_jsxs(_Fragment, { children: [_jsx(ElementResizeListener, { onResize: adaptResize }), _jsx("div", __assign({ style: { width: '100%', height: '400px' }, ref: elementRef, className: css(customStyle === null || customStyle === void 0 ? void 0 : customStyle.content), onClick: callbackMap === null || callbackMap === void 0 ? void 0 : callbackMap.onClick }, cProps))] }));
});
