import { AssetService } from "@gtpl/shared-services/asset-management";
import { AlertMessages } from "@gtpl/shared-utils/alert-messages";
import { Col, Row } from "antd";
import Form, { useForm } from "antd/lib/form/Form";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import React, { useEffect } from "react";
import { useState } from "react";

export interface AssetsMonthWiseGraphProps { }

export function AssetsMonthWiseGraph() {

    const form = useForm
    const [monthWiseData, setMonthWiseData] = useState<any[]>([]);
    const service = new AssetService();

    useEffect(() => {
      assetMonthWiseGraph();
      }, []) 

    const assetMonthWiseGraph = () => {
        service.assetsCheckInMonthWiseCount().then(res => {
          if (res.status) {
            setMonthWiseData(res.data[0]);
          } else {
            if (res.intlCode) {
              setMonthWiseData([]);
              AlertMessages.getErrorMessage(res.internalMessage);
            } else {
              AlertMessages.getErrorMessage(res.internalMessage);
            }
          }
        }).catch(err => {
          AlertMessages.getErrorMessage(err.message);
          setMonthWiseData([]);
        })
    
      }
      // const plant: String[] = [];
      // for (const eachPlant of monthWiseData){
      //   plant.push(new String(eachPlant.plantname))
      // }
    const plant = monthWiseData.map(i => {return i.plantname});
    const year = monthWiseData.map(i => {return Number(i.YEAR)});
    const month = monthWiseData.map(i => {return Number(i.jan)});
    console.log(plant,'888888')
    console.log(year,'77777')
    console.log(month,'44444')
    
    const config = {
        colors: ['#058DC7', '#50B432', '#FFC000', '#7798BF', '#aaeeee', '#ff0066',
        '#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
        chart: {
          type: 'column',
          backgroundColor: '#272953'
        },
        title: {
          text: 'Month-Wise Procured Assets',
          style: {
            color: 'var(--text-color,#eee)',
            fontSize: '1.75rem',
            lineHeight: '1.4',
            marginBottom: '0',
            overflow: 'hidden',
            // paddingTop: '2px',
            paddingTop: 'calc(2px*var(--scale-factor, 1))',
            position: 'relative',
            textOverFlow: 'ellipsis',
            whiteSpace: 'nowrap',
            zIndex: '5',
            fontFamily: 'visuelt-bold-pro,Arial,sans-serif,Font Awesome\ 5 Pro',
          }
        },
        xAxis: {
          categories: month,
          crosshair: true
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total Number of Assets'
          },
          style: {
            color: 'var(--text-color,#eee)',
            fontSize: '1.15rem',
            lineHeight: '1.4',
            marginBottom: '0',
            overflow: 'hidden',
            // paddingTop: '2px',
            paddingTop: 'calc(2px*var(--scale-factor, 1))',
            position: 'relative',
            textOverFlow: 'ellipsis',
            whiteSpace: 'nowrap',
            zIndex: '5',
            fontFamily: 'visuelt-bold-pro,Arial,sans-serif,Font Awesome\ 5 Pro',
          },
        },
        tooltip: {
          headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
          footerFormat: '</table>',
          shared: true,
          useHTML: true
        },
        plotOptions: {
          column: {
            pointPadding: 0.2,
            borderWidth: 0
          }
        },
        series: [{
          name: 'Current Year',
          data: []
      
        }, {
          name: 'Previous Year',
          data: plant
      
        }]
      };
      
    return (
        <Form layout="vertical" name="control-hooks">
            <Row gutter={24}>
                <Col span={24}>
                    <div><HighchartsReact highcharts={Highcharts} options={config} /></div>
                </Col>

            </Row>
        </Form>

    )
}