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 { filterProperties } from './object';
import { useTheme } from 'styled-components';
import { PieChartPropsSpec } from './types/Pie';
var ChartPropsSpec = Type.Object(__assign({}, PieChartPropsSpec));
var exampleProperties = {
    series: {
        data: [
            { value: 30, name: 'Validator' },
            { value: 60, name: 'Nominator' },
        ],
    },
    color: ['#E90979', '#F081B9', '#d7d7d7'],
};
export var ChartPie = implementRuntimeComponent({
    version: VERSION.Core,
    metadata: __assign(__assign({}, FALLBACK_METADATA), { name: 'chartpie', displayName: 'Pie Chart', exampleProperties: exampleProperties, annotations: {
            category: COMPONENTS_CATEGORY.Chart,
        } }),
    spec: {
        properties: ChartPropsSpec,
        state: {},
        methods: {},
        slots: {},
        styleSlots: ['content'],
        events: ['onClick'],
    },
})(function (props) {
    var _a = getComponentProps(props), series = _a.series, color = _a.color, cProps = __rest(_a, ["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({
            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 {
            tooltip: {
                show: true,
                trigger: 'item',
                backgroundColor: '#ffffff',
                borderColor: '#e7eaf3',
                borderWidth: 1,
                padding: [5, 20],
                textStyle: {
                    color: theme.colors.primary,
                },
                formatter: "{b}",
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: '50%',
                top: 'center',
                bottom: 20,
                textStyle: {
                    color: theme.colors.primary,
                },
            },
            series: [
                __assign({ type: 'pie', radius: ['65%', '85%'], center: ['25%', '50%'], avoidLabelOverlap: false, legendHoverLink: false, emphasis: {
                        scale: false,
                        label: {
                            show: false,
                        },
                    }, label: {
                        show: false,
                    }, labelLine: {
                        show: false,
                    } }, filterOption.series),
            ],
            color: filterOption.color,
        };
    }, [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: '156px' }, ref: elementRef, className: css(customStyle === null || customStyle === void 0 ? void 0 : customStyle.content), onClick: callbackMap === null || callbackMap === void 0 ? void 0 : callbackMap.onClick }, cProps))] }));
});
