import React, { useEffect, useRef, useState } from "react"
import { MultiSelect } from "react-multi-select-component"
import { Col, Label, Row } from "reactstrap"
import Select from "react-select"
import { Button as ButtonP } from "primereact/button"
import { isObjEmpty } from "../util"
import $ from "jquery"
import collect from "collect.js"

const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi }) => {
  const base_url = "<?=base_url()?>"

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

  const [kanwilSelected, setKanwilSelected] = useState(null)
  const [kppSelected, setKppSelected] = useState()
  const [seksiSelected, setSeksiSelected] = useState([])
  const [arSelected, setArSelected] = useState([])

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

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

  useEffect(() => {
    setSeksi([])
    setAr([])
    setSeksiSelected([])
    setArSelected([])
    if (kppSelected && !isObjEmpty(kppSelected)) {
      // const kpp = collect(kppSelected).pluck("value").all()
      const kpp = kppSelected.value
      $.ajax({
        url: base_url + "kewilayahan/ref/seksi",
        method: "GET",
        dataType: "json",
        data: { kpp },
        success: (data) => {
          setSeksi(data)
        }
      })
    }
  }, [kppSelected])

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

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

  const buttonProsesOnClick = () => {
    const nip_ar_perekam = collect(arSelected).pluck("value").all()
    if (nip_ar_perekam.length) {
      setDataSend({ opsiWilZona: dataOpsi.perekam.key, nip_ar_perekam })
      setHiddenGraphMatoa(true)
    } else {
      toast.current.show({ severity: "info", summary: "Info", detail: "AR Perekam harus dipilih" })
    }
  }
  return (
    <>
      <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 Perekam
          </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 sm="12">
          <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
        </Col>
      </Row>
    </>
  )
}

export default NipPerekam