import * as echarts from "echarts";

const getBarChart = (nameList, valueList) => {
  const colorList = ['#b37feb', '#ffc53e', '#36cfc9', '#5c80f7', '#ff7d7a', '#4a9cff']
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '5%',
      right: '15%',
      bottom: '5%',
      left: '3%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'slider',
        show: valueList.length > 5,
        yAxisIndex: 0,
        width: 8,
        right: 10,
        top: 20,
        bottom: 20,
        startValue: 0,
        endValue: 4, // Show 5 items (0-4)
        fillerColor: 'rgba(167,183,204,0.4)',
        borderColor: 'transparent',
        handleSize: 0,
        showDetail: false,
        brushSelect: false
      },
      {
        type: 'inside',
        yAxisIndex: 0,
        startValue: 0,
        endValue: 4,
        zoomOnMouseWheel: false,
        moveOnMouseWheel: true,
        moveOnTouch: true
      }
    ],
    xAxis: {
      type: 'value',
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      data: nameList,
      inverse: true, // Display from top to bottom
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: true,
        color: '#333',
        fontSize: 14,
        width: 100, // Limit width to handle long names
        overflow: 'truncate',
        ellipsis: '...'
      }
    },
    series: [{
      type: 'bar',
      data: valueList.map((item, index) => {
        // Cycle through colors if more data than colors
        const colorIndex = index % colorList.length;
        const color = colorList[colorIndex];
        return {
          value: item,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: 'rgba(255,255,255,0)' }, // Transparent start
              { offset: 1, color: color } // Solid end
            ]),
            borderRadius: [0, 10, 10, 0]
          },
          label: {
            show: true,
            position: 'right',
            color: color,
            fontSize: 16,
            offset: [5, 0] // Add some space between bar and label
          }
        };
      }),
      barWidth: 10,
      showBackground: false
    }]
  }
  return option
}

export default getBarChart
