import React, { useEffect, useRef, useState } from "react"
import ReactDOM from "react-dom"
import { Button, Card, CardBody, CardHeader, CardText, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from "reactstrap"
import Select from "react-select"
import jquery, { data, getJSON } from "jquery"
import collect from "collect.js"
import { format_angka, isObjEmpty } from "./util"
import { MultiSelect } from "react-multi-select-component"
import Highcharts from "highcharts"
import HighchartsReact from "highcharts-react-official"
import { Toast } from "primereact/toast"
import { Button as ButtonP } from "primereact/button"
import "primereact/resources/themes/bootstrap4-light-blue/theme.css"
import "primeflex/primeflex.css"
import TabProgresifitas from "./TabProgresifitas"
import TabPenugasan from "./TabPenugasan"
import NipPerekam from "./componentDepan/NipPerekam"
import NipPengampu from "./componentDepan/NipPengampu"
// import 'bootstrap/dist/css/bootstrap.m in.css';
// let datasend = {}

const Root = () => {
  const base_url = "<?=base_url()?>"
  const refChart1 = useRef(null)
  const toast = useRef(null)

  const [dataOpsi, setDataOpsi] = useState({})
  const [active, setActive] = useState("wilayah")

  const [hiddenGraphMatoa, setHiddenGraphMatoa] = useState(false)

  const toggle = (tab) => {
    setActive(tab)
  }

  const [prop, setProp] = useState({})
  const [kota, setKota] = useState({})
  const [kec, setKec] = useState([])
  const [kel, setKel] = useState([])

  const [propSelected, setPropSelected] = useState({})
  const [kotaSelected, setKotaSelected] = useState({})
  const [kecSelected, setKecSelected] = useState([])
  const [kelSelected, setKelSelected] = useState([])

  const [kanwil, setKanwil] = useState({})
  const [kpp, setKpp] = useState({})
  const [seksi, setSeksi] = useState([])
  const [ar, setAr] = useState([])
  const [zp, setZp] = useState([])

  const [kanwilSelected, setKanwilSelected] = useState({})
  const [kppSelected, setKppSelected] = useState({})
  const [seksiSelected, setSeksiSelected] = useState([])
  const [arSelected, setArSelected] = useState([])
  const [zpSelected, setZpSelected] = useState([])

  const [dataSend, setDataSend] = useState({ opsiWilZona: null, adm4_pcode: [], id_poly_zona: [], nip_ar_perekam: [], nip_ar_pengampu: [] })
  const [dataGraphMatoa, setDataGraphMatoa] = useState({ poi_agg: [], kpdl_agg: [] })

  const [nipArPengampu, setNipArPengampu] = useState([])

  useEffect(() => {}, [])
  useEffect(() => {
    jquery.ajax({
      url: base_url + "kewilayahan/ref/propinsi",
      method: "GET",
      dataType: "json",
      success: (data) => {
        setProp(data)
      }
    })

    jquery.ajax({
      url: base_url + "kewilayahan/ref/zpkanwil",
      method: "GET",
      dataType: "json",
      success: (data) => {
        setKanwil(data)
      }
    })

    jquery.getJSON(base_url + "kewilayahan/ref/opsi").then((response) => {
      setDataOpsi(response)
    })

    let judul = document.getElementById("judul")
    judul.innerHTML = "<h3><b><strong>E-Geospatial Thematic Tax</strong></b></h3>"
  }, [])

  useEffect(() => {
    setKota({})
    setKec([])
    setKel([])
    setKotaSelected({})
    setKecSelected([])
    setKelSelected([])
    if (propSelected && !isObjEmpty(propSelected)) {
      const prop = propSelected.value
      jquery.ajax({
        url: base_url + "kewilayahan/ref/kota",
        method: "GET",
        dataType: "json",
        data: { prop },
        success: (data) => {
          setKota(data)
        }
      })
    }
  }, [propSelected])

  useEffect(() => {
    setKec([])
    setKel([])
    setKecSelected([])
    setKelSelected([])
    if (kotaSelected && !isObjEmpty(kotaSelected)) {
      const kota = kotaSelected.value
      jquery.ajax({
        url: base_url + "kewilayahan/ref/kecamatan",
        method: "GET",
        dataType: "json",
        data: { kota },
        success: (data) => {
          setKec(data)
        }
      })
    }
  }, [kotaSelected])

  useEffect(() => {
    setKel([])
    setKelSelected([])
    if (kecSelected.length && !isObjEmpty(kecSelected)) {
      const kec = collect(kecSelected).pluck("value").all()
      jquery.ajax({
        url: base_url + "kewilayahan/ref/kelurahan",
        method: "POST",
        dataType: "json",
        data: { kec },
        success: (data) => {
          setKel(data)
        }
      })
    }
  }, [kecSelected])

  useEffect(() => {
    setKpp(null)
    setSeksi([])
    setAr([])
    setZp([])
    setKppSelected(null)
    setSeksiSelected([])
    setArSelected([])
    setZpSelected([])
    if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
      const kanwil = kanwilSelected.value
      jquery.ajax({
        url: base_url + "kewilayahan/ref/zpkpp",
        method: "POST",
        dataType: "json",
        data: { kanwil },
        success: (data) => {
          setKpp(data)
        }
      })
    }
  }, [kanwilSelected])

  useEffect(() => {
    setSeksi([])
    setAr([])
    setZp([])
    setSeksiSelected([])
    setArSelected([])
    setZpSelected([])
    if (kppSelected && !isObjEmpty(kppSelected)) {
      const kpp = kppSelected.value
      jquery.ajax({
        url: base_url + "kewilayahan/ref/zpseksi",
        method: "POST",
        dataType: "json",
        data: { kpp },
        success: (data) => {
          setSeksi(data)
        }
      })
    }
  }, [kppSelected])

  useEffect(() => {
    setAr([])
    setZp([])
    setArSelected([])
    setZpSelected([])
    if (seksiSelected && !isObjEmpty(seksiSelected)) {
      const kpp = kppSelected.value
      const seksi = collect(seksiSelected).pluck("value").all()

      jquery.ajax({
        url: base_url + "kewilayahan/ref/zpar",
        method: "POST",
        dataType: "json",
        data: { kpp, seksi },
        success: (data) => {
          setAr(data)
        }
      })
    }
  }, [seksiSelected])

  useEffect(() => {
    setZp([])
    setZpSelected([])
    if (arSelected && !isObjEmpty(arSelected)) {
      const kpp = kppSelected.value
      const seksi = collect(seksiSelected).pluck("value").all()
      const ar = collect(arSelected).pluck("value").all()
      jquery.ajax({
        url: base_url + "kewilayahan/ref/zpzp",
        method: "POST",
        dataType: "json",
        data: { kpp, seksi, ar },
        success: (data) => {
          setZp(data)
        }
      })
    }
  }, [arSelected])

  const buttonProsesOnClick = () => {
    const opsiWilZona = active
    const adm4_pcode = collect(kelSelected).pluck("value").all()
    const id_poly_zona = collect(zpSelected).pluck("value").all()
    const nip_ar_pengampu = collect().pluck("value").all()
    console.log(dataOpsi)
    switch (opsiWilZona) {
      case "wilayah":
        if (adm4_pcode.length) {
          setDataSend({ opsiWilZona: dataOpsi.wilayah.key, adm4_pcode, id_poly_zona: [] })
          setHiddenGraphMatoa(false)
        } else {
          toast.current.show({ severity: "info", summary: "Info", detail: "Kelurahan harus dipilih" })
        }
        break
      case "zona":
        if (id_poly_zona.length) {
          setDataSend({ opsiWilZona: dataOpsi.zona.key, adm4_pcode: [], id_poly_zona })
          setHiddenGraphMatoa(false)
        } else {
          toast.current.show({ severity: "info", summary: "Info", detail: "Zona harus dipilih" })
        }
        break

      default:
        break
    }
  }

  useEffect(() => {
    Highcharts.setOptions({
      accessibility: false,
      lang: {
        decimalPoint: ",",
        thousandsSep: ".",
        numericSymbols: ["rb", "jt", "M", "T", "P", "E"]
      },

      tooltip: {
        yDecimals: 2 // If you want to add 2 decimals
      }
    })
    jquery.ajax({
      url: base_url + "kewilayahan/kytp/graph_matoa",
      dataType: "json",
      type: "POST",
      data: { ...dataSend },
      success: (data) => {
        setDataGraphMatoa(data)
      }
    })
  }, [dataSend])

  const optionsGraphMatoaAgg = {
    chart: {
      zoomType: "xy",
      height: "320"
    },
    title: {
      text: "Poi Google Vs Matoa",
      style: { fontSize: "14px" }
    },

    xAxis: [
      {
        categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        crosshair: true
      }
    ],
    yAxis: [
      {
        gridLineWidth: 0,
        title: {
          text: "",
          style: {
            color: Highcharts.getOptions().colors[0]
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[0]
          }
        },
        visible: false
      },
      {
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        },
        title: {
          text: "NPWP Work True",
          style: {
            color: Highcharts.getOptions().colors[1]
          }
        },
        opposite: true,
        visible: false
      },
      {
        gridLineWidth: 0,
        title: {
          text: "Rupiah",
          style: {
            color: Highcharts.getOptions().colors[2]
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: Highcharts.getOptions().colors[2]
          }
        },
        opposite: true,
        visible: false
      },
      {
        gridLineWidth: 0,
        title: {
          text: "",
          style: {
            color: "#FF0000"
          }
        },
        labels: {
          //format: '{value}',
          style: {
            color: "##FF0000"
          }
        },
        opposite: true
      }
    ],
    tooltip: {
      shared: true
    },
    legend: {
      layout: "horizontal",
      align: "center",
      //x: 80,
      verticalAlign: "top",
      //y: 55,
      //floating: true,
      backgroundColor:
        Highcharts.defaultOptions.legend.backgroundColor || // theme
        "rgba(255,255,255,0.25)"
    },
    series: [
      {
        color: "#FF0000",
        name: "Jml PoI",
        type: "column",
        yAxis: 3,
        data: dataGraphMatoa.poi_agg,
        marker: {
          enabled: true
        },
        tooltip: {
          valueSuffix: " PoI"
        }
      },
      {
        name: "Matoa",
        type: "spline",
        yAxis: 3,
        data: dataGraphMatoa.kpdl_agg,
        marker: {
          enabled: true
        },
        tooltip: {
          pointFormatter: function () {
            const idx = this.index
            let pct_coverage
            const jml_poi_agg = dataGraphMatoa.poi_agg
            if (jml_poi_agg[idx] && jml_poi_agg[idx] !== 0) {
              pct_coverage = format_angka(parseFloat((parseFloat(this.y) / jml_poi_agg[idx]) * 100).toFixed(2)) + "%"
            }

            let s =
              '<span style="color:' +
              this.color +
              '">\u25CF</span> ' +
              this.series.name +
              ": <b>" +
              format_angka(this.y) +
              " lokasi kpdl</b> " +
              (pct_coverage ? "(" + pct_coverage + ")<br>\n" : "<br>")
            return s
          },
          shared: false
        },
        visible: true,
        color: "#8000ff"
      }
    ]
  }

  return (
    <>
      <Row>
        <Col sm="12">
          <Card>
            <CardBody>
              <Nav tabs>
                <NavItem>
                  <NavLink
                    style={{ cursor: "pointer" }}
                    active={active === "wilayah"}
                    onClick={() => {
                      toggle("wilayah")
                    }}
                  >
                    Wilayah Adm.
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ cursor: "pointer" }}
                    active={active === "zona"}
                    onClick={() => {
                      toggle("zona")
                    }}
                  >
                    Zona Pengawasan
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ cursor: "pointer" }}
                    active={active === "perekam"}
                    onClick={() => {
                      toggle("perekam")
                    }}
                  >
                    Perekam
                  </NavLink>
                </NavItem>
                <NavItem>
                  <NavLink
                    style={{ cursor: "pointer" }}
                    active={active === "pengampu"}
                    onClick={() => {
                      toggle("pengampu")
                    }}
                  >
                    Pengampu
                  </NavLink>
                </NavItem>
              </Nav>
              <TabContent className="py-3" activeTab={active}>
                <TabPane tabId="wilayah">
                  <Row>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Propinsi
                      </Label>
                      <Select
                        placeholder="Pilih Propinsi"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setPropSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={propSelected}
                        value={propSelected}
                        isClearable={false}
                        options={prop}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Kota/Kab
                      </Label>
                      <Select
                        placeholder="Pilih Kota/Kab"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKotaSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={kotaSelected}
                        value={kotaSelected}
                        isClearable={false}
                        options={kota}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Kecamatan">
                        Kecamatan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={kec}
                        value={kecSelected}
                        onChange={(e) => {
                          setKecSelected(e)
                        }}
                        labelledBy="Pilih Kecamatan"
                        overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kecamatan" }}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Kelurahan">
                        Kelurahan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={kel}
                        value={kelSelected}
                        onChange={(e) => {
                          setKelSelected(e)
                        }}
                        labelledBy="Pilih Kelurahan"
                        overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Kelurahan" }}
                      />
                    </Col>
                  </Row>
                  <Row className="mt-2">
                    <Col sm="12">
                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tabId="zona">
                  <Row>
                    <Col md="3">
                      <Label className="form-label" for="basicInput">
                        Kanwil
                      </Label>
                      <Select
                        placeholder="Pilih Kanwil"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKanwilSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={kanwilSelected}
                        isClearable={false}
                        options={kanwil}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih KPP">
                        KPP
                      </Label>
                      <Select
                        placeholder="Pilih KPP"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKppSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={kppSelected}
                        isClearable={false}
                        options={kpp}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih Seksi">
                        Seksi
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={seksi}
                        value={seksiSelected}
                        onChange={(e) => {
                          setSeksiSelected(e)
                        }}
                        labelledBy="Pilih Seksi"
                        overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Seksi" }}
                      />
                    </Col>
                    <Col md="3">
                      <Label className="form-label" for="Pilih AR">
                        AR
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={ar}
                        value={arSelected}
                        onChange={(e) => {
                          setArSelected(e)
                        }}
                        labelledBy="Pilih AR"
                        overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih AR" }}
                      />
                    </Col>
                  </Row>
                  <Row className="mt-2">
                    <Col md="3">
                      <Label className="form-label" for="Pilih Zona">
                        Zona Pengawasan
                      </Label>
                      <MultiSelect
                        className="me-1 w-full"
                        hasSelectAll={true}
                        debounceDuration={300}
                        options={zp}
                        value={zpSelected}
                        onChange={(e) => {
                          setZpSelected(e)
                        }}
                        labelledBy="Pilih Zona"
                        overrideStrings={{ allItemsAreSelected: "Semua dipilih", selectSomeItems: "Pilih Zona" }}
                      />
                    </Col>
                    <Col md="3" className="pt-4">
                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
                    </Col>
                  </Row>
                </TabPane>
                <TabPane tabId="perekam">
                  <NipPerekam
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={active}
                    toast={toast}
                    setHiddenGraphMatoa={setHiddenGraphMatoa}
                    dataOpsi={dataOpsi}
                  />
                </TabPane>
                <TabPane tabId="pengampu">
                  <NipPengampu
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={active}
                    toast={toast}
                    setHiddenGraphMatoa={setHiddenGraphMatoa}
                    dataOpsi={dataOpsi}
                  />
                </TabPane>
              </TabContent>
            </CardBody>
          </Card>
        </Col>
      </Row>

      <Row hidden={hiddenGraphMatoa}>
        <Col sm="12">
          <Card>
            <CardHeader className="d-flex justify-content-center p-2">
              <CardTitle tag={"h1"} className="font-weight-bold">
                Statistik Penguasaan Wilayah
              </CardTitle>
            </CardHeader>
            <CardBody className="p-1">
              <div id="graph_matoa_agg">
                <HighchartsReact ref={refChart1} highcharts={Highcharts} options={optionsGraphMatoaAgg} />
              </div>
            </CardBody>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col sm="12">
          <Card>
            <CardHeader className="d-flex justify-content-center p-2">
              <CardTitle tag={"h1"} className="font-weight-bold">
                Statistik Progresifitas Hasil Kegiatan Matoa
              </CardTitle>
            </CardHeader>
            <CardBody>
              <TabProgresifitas dataSend={dataSend} />
            </CardBody>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col sm="12">
          <TabPenugasan dataSend={dataSend} />
        </Col>
      </Row>
      <Toast ref={toast} />
    </>
  )
}

const container = document.getElementById("app")
const component = <Root />

ReactDOM.render(component, container)