import React, { useEffect, useRef, useState } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'
import { Col, Row } from 'reactstrap'
import { format_angka } from '../util'
import $ from 'jquery'

import { Skeleton } from 'primereact/skeleton'
import collect from 'collect.js'

const date = new Date()
const cBulan = date.getMonth() + 1

const PayComp = ({ dataSend }) => {
  const base_url = '<?=base_url()?>'

  const refChart = useRef(null)
  const refChart1 = useRef(null)
  const refChart2 = useRef(null)
  const [dataC, setDataC] = useState(null)
  const [dataMin1, setDataMin1] = useState(null)
  const [dataMin2, setDataMin2] = useState(null)
  const [loading, setLoading] = useState(false)

  const currentMonth = '<?=currentMonth()?>'
  const currentYear = '<?=currentYear()?>'

  useEffect(() => {
    setLoading(true)
    $.get({
      url: base_url + 'kewilayahan/kytp/sebaranPayComp',
      dataType: 'json',
      type: 'POST',
      data: {
        ...dataSend,
        tahun: currentYear,
        bulan: currentMonth
      },
      success: (data) => {
        setDataC(data.dataC)
        setDataMin1(data.dataMin1)
        setDataMin2(data.dataMin2)
        setLoading(false)
      }
    })
  }, [dataSend])

  const optionsChart = (data, title, type) => {
    const total_wp = collect(data).sum('y')
    return {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        zoomType: 'xy',
        height: '300'
      },
      title: {
        text: title,
        style: { fontSize: '10px' }
      },
      tooltip: {
        pointFormat: '<b>{point.percentage:.1f}%</b><br>Jml NPWP : {point.y} dari ' + format_angka(total_wp) + ' yang terdapat data penerimaannya'
      },
      accessibility: {
        point: {
          valueSuffix: '%'
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          // colors: warna_garis,
          dataLabels: {
            enabled: true,
            style: { fontSize: '0.7rem' },
            format: '{point.name}: <br> {point.percentage:.1f} %'
          }
          //showInLegend: true
        }
        // series: pie_click
      },
      series: [
        {
          name: type,
          data
        }
      ]
    }
  }
  return (
    <>
      {loading ? (
        <Row>
          <Col md="12">
            <Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton>
          </Col>
        </Row>
      ) : (
        <Row>
          <Col md="4">
            <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataC, 's.d. bulan ini', 'C')} />
          </Col>
          <Col md="4">
            <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataMin1, 's.d. bulan lalu', 'Min1')} />
          </Col>
          <Col md="4">
            <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataMin2, 's.d. 2 bulan yang lalu', 'Min2')} />
          </Col>
        </Row>
      )}
    </>
  )
}

export default PayComp