import React from 'react'
import ReactEcharts from 'echarts-for-react'
import { useTheme } from '@material-ui/core/styles'

const CustomLineChart = (props) => {
    const { data, bg, height } = props
    const option = {
        title: {
            text: 'textLeft',
            right: 'auto',
            padding: [5, 10],
        },
        // title: {
        //     text: textRight,
        //     textAlign: 'auto',
        // },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '10%',
            containLabel: true,
        },
        xAxis: {
            type: 'category',
            axisLine: {
                show: false,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                fontSize: 13,
                fontFamily: 'roboto',
            },
            axisPointer: {
                snap: true,
            },
        },
        yAxis: {
            type: 'value',
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    opacity: 0.15,
                },
            },
            axisLabel: {
                show: false,
                fontSize: 13,
                fontFamily: 'roboto',
            },
        },
        series: [
            {
                data: data,
                type: 'line',
                areaStyle: {},
            },
        ],
        tooltip: {
            show: true,
            trigger: 'item',

            formatter: function (a) {
                const { value } = a
                return `
                  <div style="padding: 15px">
                      <div style="white-space: nowrap;">30/12/111 - 30/12/111</div>
                      <div style="margin-top: 10px">
                      <span style="white-space: nowrap">ccc: <strong style="margin-left: 3px">${value}</strong></span>
                  </div>
                  <div style="margin-top: 10px">
                      <span style="white-space: nowrap">hi: <strong style="margin-left: 3px">hu</strong></span>
                  </div>
                  </div>
              `
            },
        },
    }

    return <ReactEcharts style={{ height: height }} option={option} />
}

export default CustomLineChart
