import React, { useEffect, useState } from 'react'
import ReactEcharts from "echarts-for-react"; 
import { Col, Container, Row } from 'react-bootstrap';
import { getBarchartData } from '../TabulatorData';

let option;
var app = {};
const Barchart = () => {
      const [apiData1, setapiData1] = useState()
      const series = apiData1?.map((item)=>({
        name: item?.name,
        data: item?.data,
      }))
      app.config = {
        rotate: 67,
        align: 'right',
        verticalAlign: 'middle',
        position: 'bottom',
        distance: 6,
      };
      const labelOption = {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: '{c}  {name|{a}}',
        fontSize: 12,
        rich: {
          name: {
            color: 'red',
            fontSize: 12,
          },
        }
      };
      
    option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: series?.map(item => item?.name),
          top:"2%",
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['bar', 'line'] },
            restore: { show: true },
            saveAsImage: {
                type: "svg"
              }
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['', '', '', '', ''],
            boundaryGap: true,
            triggerEvent : true
          },
        ],
        yAxis: [
          {
            type: 'value',
          }
        ],
        series: series?.map((item, index) => Object.assign(item, {
          type: 'bar',
          label: labelOption,
        }))
      };
useEffect(()=>{
  // Echarts Barchart 
  const getBarChartResult = () => {
    // ⚠️ This is where you should pull data in from your server
      const barchartResultsResponse = getBarchartData();
      setapiData1(barchartResultsResponse);
   };
  getBarChartResult();
  // Echarts Barchart end
}, [])      
  return (
    <>
    <Container fluid>
        <Row>
            <Col>
            <ReactEcharts option={option}/>
            </Col>
        </Row>
    </Container>
    </>
  )
}

export default Barchart