import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';

import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";

import {useAppSelector} from "../../../store/hooks";
import {selectWeekProductionRates} from "../../../store/ProductionMonitoringEntity";


function CenterDownChartWeek() {
  const CenterDownChartRef = useRef(null)
  const ProductionRates = useAppSelector(selectWeekProductionRates);
  let ValueSeries: any[] = [];
  let xAxisData: Array<string> = [];
  // @ts-ignore
  ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
    xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
      month: '2-digit',
      day: '2-digit',
      weekday: 'short',
    }))
  })

  for (let item in ProductionRates) {
    let dataValue: Array<number> = []
    // @ts-ignore
    ProductionRates[item].map((item) => {
      dataValue.push(item.passRate);
    })
    ValueSeries.push({
      name: item,
      data: dataValue,
      lineStyle: {width: 2},
      symbol: "roundRect",
      type: "line",
      label: {show: true, color: 'white'}
    })
  }


  useEffect(() => {
    // @ts-ignore
    let chartInstance = echarts.init(CenterDownChartRef.current, theme);

    const option = {
      grid: {
        top: "15%",
        bottom: "0%",
        left: "1.5%",
        right: "0",
        containLabel: true,
      },
      legend: {
        show: true,
        selectedMode: false,
        itemHeight: 8,
        itemWidth: 13,
        textStyle: {
          fontSize: 10,
        }
      },
      xAxis: {
        type: 'category',
        data: xAxisData,
        splitLine: {
          show: false,
        }
      },
      yAxis: {
        type: 'value',
        name: intl.get('Output'),
        scale: true,
        nameTextStyle: {
          align: "right",
          fontSize: 11,
          color: "rgba(255, 255, 255, 1)",
          verticalAlign: "middle",
          padding: [0, 5, 0, 0]
        }
      },
      series: ValueSeries
    }

    chartInstance.setOption(option);
    chartInstance.resize();

    return () => {
      chartInstance.dispose()
    }
  })

  return (
    <div ref={CenterDownChartRef} className="chart2"/>
  );
}

export default CenterDownChartWeek;