/*
 * Copyright (c) Baidu, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import type {
    BarSeriesOption,
    EChartsOption,
    SeriesOption
} from 'echarts';
import BaseChart from './base-chart';
import {customColors, emphasisColors} from './constant';
import {Type} from './interface';
import {deepMerge} from './utils';

export default class BarChart extends BaseChart {
    initData() {
        const baseData = super.initData();

        return {
            ...baseData,
            type: Type.BAR
        };
    }

    // 重写获取默认配置方法，添加柱状图特有的样式
    getDefaultOption(): EChartsOption {
        const baseOption = super.getDefaultOption();
        const barDefaultOption: EChartsOption = {
            legend: {
                right: 0
            },
            tooltip: {
                axisPointer: {
                    type: 'shadow',
                    shadowStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {offset: 0, color: customColors.lightGradientStart},
                                {offset: 0.7, color: customColors.lightGradientMiddle},
                                {offset: 1, color: customColors.lightGradientEnd}
                            ]
                        }
                    }
                }
            },
            xAxis: {
                type: 'category',
                axisLabel: {
                    align: 'center',
                    width: 50,
                    overflow: 'truncate'
                }
            },
            yAxis: {
                type: 'value'
            }
        };
        return deepMerge(baseOption, barDefaultOption);
    }

    /**
     * 目前版本echart的tooltip params类型没有axis相关信息，因此any绕过，后续升级了echart再处理
     * @see https://app.unpkg.com/echarts@5.5.0/files/types/src/component/tooltip/TooltipView.d.ts
     */
    tooltipFormatter(params: any): string {
        if (Array.isArray(params)) {
            let tooltip = `${params[0].axisValue}<br/>`;

            params.forEach((param: any) => {
                tooltip += `${param.marker}${param.seriesName}: ${param.value}<br/>`;
            });

            return tooltip;
        }

        return `${params.axisValue}<br/>${params.marker}${params.seriesName}: ${params.value}`;
    }

    // 重写后处理方法，设置 bar series 的默认属性
    postProcessOption(option: EChartsOption): EChartsOption {
        if (option.series && Array.isArray(option.series)) {
            option.series = this.setSeries(option.series);
        }

        return super.postProcessOption(option);
    }
    getTooltipFormatter() {
        return this.tooltipFormatter;
    }

    // 设置 series 的默认样式
    setSeries(series: SeriesOption[]): BarSeriesOption[] {
        return series.map((item, index) => {
            const baseSeriesOption: BarSeriesOption = {
                type: Type.BAR,
                itemStyle: {
                    borderWidth: 0,
                    borderRadius: 4
                },
                emphasis: {
                    label: {
                        show: true,
                        backgroundColor: emphasisColors && emphasisColors[index],
                        width: 6,
                        height: 6,
                        color: 'transparent',
                        borderColor: this.getDesignToken('--cos-color-bg'),
                        borderWidth: 2,
                        borderRadius: 6,
                        offset: [0, 3],
                        verticalAlign: 'top',
                        align: 'center',
                        position: 'top'
                    },
                    itemStyle: {
                        color: emphasisColors && emphasisColors[index],
                        borderColor: emphasisColors && emphasisColors[index]
                    }
                }
            };

            return {
                ...baseSeriesOption,
                // 放最后方便用户覆盖
                ...item
            } as BarSeriesOption;
        });
    }
}