import React, { useEffect, useRef, useState } from "react"
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import { Col, Row } from "reactstrap"
import { Badge } from "primereact/badge"
import { Button as ButtonP } from "primereact/button"
import { format_angka } from "../util"
import collect from "collect.js"
import $ from "jquery"
import "primereact/resources/themes/bootstrap4-light-blue/theme.css"
import "primeflex/primeflex.css"

const ChartKpdl = ({ dataSend }) => {
  const base_url = "<?=base_url()?>"

  const refChart = useRef(null)
  const [data, setData] = useState({
    kpdl: [],
    akum: [],
    categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]
  })

  const [selectedBulan, setSelectedBulan] = useState("")
  const [selectedBulanText, setSelectedBulanText] = useState("semua")
  const [bulan, setBulan] = useState([])

  useEffect(() => {
    $.get({
      url: base_url + "kewilayahan/kytp/identifikasiLapangan",
      dataType: "json",
      type: "POST",
      data: {
        ...dataSend,
        bulan: selectedBulan
      },
      success: (data) => {
        setData(data)
      }
    })
  }, [dataSend, selectedBulan])

  useEffect(() => {
    $.get({
      url: base_url + "kewilayahan/kytp/getBulan",
      dataType: "json",
      type: "GET",
      success: (data) => {
        setBulan(data)
        setSelectedBulan(data[0].value)
      }
    })
  }, [])

  const optionsChart1 = () => {
    return {
      chart: {
        zoomType: "xy",
        height: "320pt"
      },
      title: {
        text: "",
        align: "left"
      },
      subtitle: {
        align: "left"
      },
      xAxis: [
        {
          categories: data.categories,
          crosshair: true
        }
      ],

      yAxis: [
        {
          labels: {
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          title: {
            text: "Lokasi KPDL",
            style: {
              color: Highcharts.getOptions().colors[2]
            }
          },
          opposite: true
        },
        {
          title: {
            text: "Lokasi KPDL s.d.",
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          labels: {
            style: {
              color: Highcharts.getOptions().colors[0]
            }
          },
          opposite: true
        }
      ],

      tooltip: {
        shared: true
      },
      legend: {
        layout: "horizontal",
        align: "center",

        verticalAlign: "top",
        backgroundColor:
          Highcharts.defaultOptions.legend.backgroundColor || // theme
          "rgba(255,255,255,0.25)"
      },
      //   plotOptions: {
      //     // series: hijau_klik_series
      //   },
      series: [
        {
          name: "Lokasi KPDL",
          type: "column",
          yAxis: 0,
          color: Highcharts.getOptions().colors[2],
          data: data.kpdl,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: " Kpdl"
          }
        },

        {
          name: "Lokasi KPDL akumulasi",
          type: "spline",
          yAxis: 1,
          data: data.akum,
          marker: {
            enabled: true
          },
          tooltip: {
            valueSuffix: " data"
          },
          visible: false
        }
      ]
    }
  }

  const refBulanOnClick = (e) => {
    // console.log(e)
    const kodeBulan = e.target.dataset.value
    const labelBulan = e.target.dataset.label
    setSelectedBulan(kodeBulan)
    setSelectedBulanText(labelBulan)
  }
  return (
    <>
      <Row>
        <Col md="12">
          <div className="d-flex justify-content-between border-bottom-1 pb-2">
            <div>
              <span className="mr-2">Bulan :</span>
              {bulan.map((val, idx) => {
                return (
                  <Badge
                    id={idx}
                    data-value={val.value}
                    data-label={val.label}
                    severity="warning"
                    value={val.label}
                    className="ref_bulan_a cursor-pointer mr-10"
                    onClick={(e) => refBulanOnClick(e)}
                  ></Badge>
                )
              })}
            </div>
            <div>
              <span>Bulan terpilih : </span>
              <span>{selectedBulanText}</span>
            </div>
          </div>
        </Col>
      </Row>
      <Row>
        <Col>
          <HighchartsReact ref={refChart} highcharts={Highcharts} options={optionsChart1()} />
        </Col>
      </Row>
    </>
  )
}

export default ChartKpdl