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 jquery from 'jquery'
import collect from 'collect.js'
import { useDispatch, useSelector } from 'react-redux'
import { setSelectedOpsi } from '../store/KpdlStore'

const NipPerekam = ({ dataSend, setDataSend, activeTab, toast, setHiddenGraphMatoa, dataOpsi }) => {
  const dispatch = useDispatch()
  const storeKpdl = useSelector((state) => state.kpdl)

  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(() => {
    jquery.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
      jquery.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 = kppSelected.value
      jquery.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()

      jquery.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) {
      dispatch(setSelectedOpsi(dataOpsi.perekam))
      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"
            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