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 collect from "collect.js"
import $ from "jquery"
const KLU = ({ dataSend }) => {
  const base_url = "<?=base_url()?>"

  const refChart = useRef(null)
  const refChart1 = useRef(null)
  const refChart2 = useRef(null)
  const refChart3 = useRef(null)
  const [dataKluTerdaftar, setDataKluTerdaftar] = useState(null)
  const [dataKluYgBayar, setDataKluYgBayar] = useState(null)
  const [dataKluYgTidakBayar, setDataKluYgTidakBayar] = useState(null)
  const [dataRupiahBayar, setDataRupiahBayar] = useState(null)

  useEffect(() => {
    $.get({
      url: base_url + "kewilayahan/kytp/sebaranKLU",
      dataType: "json",
      type: "POST",
      data: {
        ...dataSend
      },
      success: (resp) => {
        setDataKluTerdaftar(() => {
          const data = resp.dataKluTerdaftar
          const dataRet = []
          let jmlLainnya = 0

          for (let index = 0; index < data.length; index++) {
            const element = data[index]
            if (index < 5) {
              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
            } else {
              jmlLainnya += element.y
            }
          }
          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
          return dataRet
        })
        setDataKluYgBayar(() => {
          const data = resp.dataKluYgBayar
          const dataRet = []
          let jmlLainnya = 0

          for (let index = 0; index < data.length; index++) {
            const element = data[index]
            if (index < 5) {
              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
            } else {
              jmlLainnya += element.y
            }
          }
          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
          return dataRet
        })

        setDataKluYgTidakBayar(() => {
          const data = resp.dataKluYgTidakBayar
          const dataRet = []
          let jmlLainnya = 0

          for (let index = 0; index < data.length; index++) {
            const element = data[index]
            if (index < 5) {
              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
            } else {
              jmlLainnya += element.y
            }
          }
          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
          return dataRet
        })

        setDataRupiahBayar(() => {
          const data = resp.dataRupiahBayar
          const dataRet = []
          let jmlLainnya = 0

          for (let index = 0; index < data.length; index++) {
            const element = data[index]
            if (index < 5) {
              dataRet.push({ name: element.name, y: element.y, kode: element.kode })
            } else {
              jmlLainnya += element.y
            }
          }
          dataRet.push({ name: "Lainnya", y: jmlLainnya, kode: "<?=encryptData('lainnya')?>" })
          return dataRet
        })
      }
    })
  }, [dataSend])

  const optionsChart = (data, title, attribute1) => {
    const total_wp = collect(data).sum("y")
    return {
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: "pie",
        zoomType: "xy",
        height: "300"
      },
      title: {
        text: `<u>${title}</u>`,
        style: { fontSize: "14px" },
        useHTML: true
      },
      tooltip: {
        pointFormat: "<b>{point.percentage:.1f}%</b><br>: {point.y} dari " + format_angka(total_wp) + " total " + attribute1
      },
      accessibility: {
        point: {
          valueSuffix: "%"
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: "pointer",
          dataLabels: {
            enabled: true,
            style: { fontSize: "10px" },
            format: "{point.name}: <br> {point.percentage:.1f} %"
          }
        }
        // series: pie_click
      },
      series: [
        {
          name: "",
          data
        }
      ]
    }
  }
  return (
    <>
      <Row>
        <Col md="6">
          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart(dataKluTerdaftar, "KLU Terdaftar", "NPWP")} />
        </Col>
        <Col md="6">
          <HighchartsReact
            ref={refChart3}
            highcharts={Highcharts}
            options={optionsChart(dataRupiahBayar, "Dominasi KLU berdarkan Jumlah Pembayaran (Rp)", "Keseluruhan Pembayaran")}
          />
        </Col>
        <Col md="6">
          <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsChart(dataKluYgBayar, "Dominasi KLU dengan pembayaran >0", "NPWP")} />
        </Col>
        <Col md="6">
          <HighchartsReact ref={refChart2} highcharts={Highcharts} options={optionsChart(dataKluYgTidakBayar, "Dominasi KLU pembayaran <=0", "NPWP")} />
        </Col>
      </Row>
    </>
  )
}

export default KLU