import * as echarts from 'echarts';
import variables from './../style/variables';

const contrastColor = 'rgba(255, 255, 255, 0.3)';

const axisCommon = function () {
    return {
        axisTick: {
            lineStyle: {
                color: 'transparent'
            }
        },
        axisLabel: {
            textStyle: {
                color: 'rgba(255, 255, 255, 0.8)'
            }
        },
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: contrastColor
            }
        },
        splitArea: {
            areaStyle: {
                color: contrastColor
            }
        }
    };
};

const colorPalette = [
    '#3d91f3',
    'rgb(135, 99, 245)',
    'rgb(52, 126, 226)',
    'rgb(255, 74, 96)',
    '#0dd5ab',
    '#f49f42',
    '#73a373',
    '#73b9bc',
    '#7289ab',
    '#91ca8c'];

const theme = {
    color: colorPalette,
    backgroundColor: 'rgba(0,0,0,0.1)',
    tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        borderWidth: '0',
        textStyle: {
            color: '#ffffff',
        },
        axisPointer: {
            lineStyle: {
                color: contrastColor
            },
            crossStyle: {
                color: contrastColor
            }
        }
    },
    legend: {
        textStyle: {
            color: 'rgba(255, 255, 255, 0.8)'
        }
    },
    textStyle: {
        color: 'rgba(255, 255, 255, 0.8)'
    },
    title: {
        textStyle: {
            color: contrastColor
        }
    },
    toolbox: {
        iconStyle: {
            normal: {
                borderColor: contrastColor
            }
        }
    },
    dataZoom: {
        textStyle: {
            color: contrastColor
        }
    },
    timeline: {
        lineStyle: {
            color: contrastColor
        },
        itemStyle: {
            normal: {
                color: colorPalette[1]
            }
        },
        label: {
            normal: {
                textStyle: {
                    color: contrastColor
                }
            }
        },
        controlStyle: {
            normal: {
                color: contrastColor,
                borderColor: contrastColor
            }
        }
    },
    timeAxis: axisCommon(),
    logAxis: axisCommon(),
    valueAxis: axisCommon(),
    categoryAxis: axisCommon(),

    line: {
        symbol: 'circle'
    },
    graph: {
        color: colorPalette
    },
    gauge: {
        title: {
            textStyle: {
                color: contrastColor
            }
        }
    },
    candlestick: {
        itemStyle: {
            normal: {
                color: '#FD1050',
                color0: '#0CF49B',
                borderColor: '#FD1050',
                borderColor0: '#0CF49B'
            }
        }
    }
};
theme.categoryAxis.splitLine.show = false;

echarts.registerTheme('dark', theme);