import React from 'react'
import { BottomNavigation, BottomNavigationAction, Box, Paper, Skeleton, SwipeableDrawer, styled } from '@mui/material'
import { useEffect, useRef, useState } from 'react'
import { Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
import { AutorenewOutlined, CloseOutlined } from '@mui/icons-material'
import { red } from '@mui/material/colors'
import { useDispatch } from 'react-redux'
import collect from 'collect.js'
import { useMap } from 'react-leaflet'
import L from 'leaflet'
import { Button as ButtonP } from 'primereact/button'
// import Wkt from 'wicket'

const parse = require('wellknown')

const anchor = 'bottom'
const StyledBox = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'light' ? '#fff' : grey[800]
}))
const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary
}))
import { MultiSelect } from 'react-multi-select-component'
import Select from 'react-select'
import jquery from 'jquery'
import { isObjEmpty } from '../kytp/util'

import { setCqlFilterWilayah, setSelectedOpsi } from '../kytp/store/PetaStore'
import { Toast } from 'primereact/toast'
import NipPerekam from './components/NipPerekam'
import NipPengampu from './components/NipPengampu'
import { matoaLayers } from './layers/overlayLayers'

const PopUpWilayah = (props) => {
  const { isOpenPopUpWilayah, setIsOpenPopUpWilayah, wmsRef, refFeatureBawah, zonaRef, dataSend, setDataSend, dataOpsi, setDataOpsi } = props
  const toast = useRef()
  const map = useMap()
  const dispatch = useDispatch()

  const [tabActive, setTabActive] = useState('zona')
  const [isTerapkan, setIsTerapkan] = useState(false)

  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 toggle = (tab) => {
    setTabActive(tab)
  }
  useEffect(() => {
    jquery.ajax({
      url: '/engineN/kewilayahan/ref/propinsi',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setProp(data)
      }
    })

    jquery.ajax({
      url: '/engineN/kewilayahan/ref/zpkanwil',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setKanwil(data)
      }
    })
  }, [])
  useEffect(() => {
    setKota([])
    setKec([])
    setKel([])
    setKotaSelected([])
    setKecSelected([])
    setKelSelected([])
    if (propSelected && !isObjEmpty(propSelected)) {
      const prop = propSelected.value
      jquery.ajax({
        url: '/engineN/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: '/engineN/kewilayahan/ref/kecamatan',
        method: 'GET',
        dataType: 'json',
        data: { kota },
        success: (data) => {
          setKec(data)
        }
      })
    }
  }, [kotaSelected])

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

  useEffect(() => {
    setKpp([])
    setSeksi([])
    setAr([])
    setZp([])
    setKppSelected(null)
    setSeksiSelected([])
    setArSelected([])
    setZpSelected([])
    if (kanwilSelected && !isObjEmpty(kanwilSelected)) {
      const kanwil = kanwilSelected.value
      jquery.ajax({
        url: '/engineN/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: '/engineN/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()
      const seksi = [seksiSelected.value]

      jquery.ajax({
        url: '/engineN/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 seksi = [seksiSelected.value]
      // const ar = collect(arSelected).pluck('value').all()
      const ar = [arSelected.value]
      jquery.ajax({
        url: '/engineN/kewilayahan/ref/zpzp',
        method: 'POST',
        dataType: 'json',
        data: { kpp, seksi, ar },
        success: (data) => {
          setZp(data)
        }
      })
    }
  }, [arSelected])

  const toggleDrawer = (anchor, open) => (event) => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return
    }
    setIsOpenPopUpWilayah(open)
  }
  const toggleTab = (newVal) => {
    setTabActive(newVal)
  }

  const onClickReset = () => {
    dispatch(setCqlFilterWilayah('(1=1)'))

    refFeatureBawah.current.clearLayers()

    matoaLayers.poiMatoaNpwpLayer.setParams({
      styles: 'poi_matoa_npwp',
      cql_filter: '(1=1)'
    })
    matoaLayers.poiMatoaNpwpNullLayer.setParams({
      styles: 'poi_matoa_npwp_null',
      cql_filter: '(1=1)'
    })

    // matoaLayers.poiGoogleLayer.setParams({
    //   styles: 'poi_google',
    //   cql_filter: '(1=1)'
    // })

    setIsOpenPopUpWilayah(false)
  }

  const buttonProsesOnClick = () => {
    refFeatureBawah.current.clearLayers()
    const opsiWilZona = tabActive
    // const adm4_pcode = collect(kelSelected).pluck('value').all()
    const adm4_pcode = [kelSelected.value]
    // const adm4_pcode2 = collect(kelSelected).pluck('value2').all()
    const adm4_pcode2 = [kelSelected.value2]
    const id_poly_zona = collect(zpSelected).pluck('value').all()
    const id_poly_zona2 = collect(zpSelected).pluck('value2').all()

    switch (opsiWilZona) {
      case 'wilayah':
        console.log('wilayah selected')
        if (adm4_pcode.length) {
          dispatch(setSelectedOpsi(dataOpsi.wilayah))
          setDataSend({ opsiWilZona: dataOpsi.wilayah.key, adm4_pcode, id_poly_zona: [] })
          //ID_POLY_ZONA
          const par_kelurahan = adm4_pcode2.join("','")
          const cq_filter_poi = "ADM4_PCODE in ('" + par_kelurahan + "')"
          dispatch(setCqlFilterWilayah(cq_filter_poi))
          matoaLayers.poiMatoaNpwpLayer.setParams({
            style: 'poi_matoa_npwp',
            cql_filter: cq_filter_poi
          })
          matoaLayers.poiMatoaNpwpNullLayer.setParams({
            style: 'poi_matoa_npwp_null',
            cql_filter: cq_filter_poi
          })

          // matoaLayers.poiGoogleLayer.setParams({
          //   style: 'poi_google',
          //   cql_filter: cq_filter_poi
          // })
          // console.log('wait....')
          jquery.ajax({
            url: '/engineN/kewilayahan/peta/kelurahanpoly',
            dataType: 'text',
            type: 'POST',
            data: {
              adm4_pcode
            },
            success: (response) => {
              if (response) {
                const lyr_kota = L.geoJSON(parse(response), {
                  style: function (feature) {
                    return {
                      color: 'blue',
                      fillOpacity: 0,
                      weight: 2,
                      dashArray: '30 10',
                      interactive: false
                    }
                  }
                }).addTo(refFeatureBawah.current)
                map.fitBounds(lyr_kota.getBounds()).setZoom(map.getZoom() - 1)
                setIsOpenPopUpWilayah(false)
              }
            }
          })
        } else {
          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Kelurahan harus dipilih' })
        }
        break
      case 'zona':
        console.log('zona selected')
        if (id_poly_zona.length) {
          dispatch(setSelectedOpsi(dataOpsi.zona))
          setDataSend({ opsiWilZona: dataOpsi.zona.key, adm4_pcode: [], id_poly_zona })
          //ID_POLY_ZONA
          const par_zona = id_poly_zona2.join("','")
          const cq_filter_poi = "ID_POLY_ZONA in ('" + par_zona + "')"
          dispatch(setCqlFilterWilayah(cq_filter_poi))
          matoaLayers.poiMatoaNpwpLayer.setParams({
            styles: 'poi_matoa_npwp',
            cql_filter: cq_filter_poi
          })

          matoaLayers.poiMatoaNpwpNullLayer.setParams({
            styles: 'poi_matoa_npwp_null',
            cql_filter: cq_filter_poi
          })

          // matoaLayers.poiGoogleLayer.setParams({
          //   styles: 'poi_google',
          //   cql_filter: cq_filter_poi
          // })
          jquery.ajax({
            url: '/engineN/kewilayahan/peta/zonapoly',
            type: 'post',
            dataType: 'text',
            data: {
              id_poly_zona
            },
            success: (response) => {
              if (response) {
                const lyr_kota = L.geoJSON(parse(response), {
                  style: function (feature) {
                    return {
                      color: 'blue',
                      fillOpacity: 0,
                      weight: 2,
                      dashArray: '30 10',
                      interactive: false
                    }
                  }
                }).addTo(refFeatureBawah.current)
                map.fitBounds(lyr_kota.getBounds()).setZoom(map.getZoom() - 1)
                setIsOpenPopUpWilayah(false)
              }
            }
          })
        } else {
          toast.current.show({ severity: 'info', summary: 'Info', detail: 'Zona harus dipilih' })
        }
        break

      default:
        break
    }
  }

  return (
    <>
      <SwipeableDrawer anchor={anchor} open={isOpenPopUpWilayah} onClose={toggleDrawer(anchor, false)} onOpen={toggleDrawer(anchor, true)}>
        <Box
          sx={{
            flexGrow: 1,
            height: 'calc(100vh - 100px)',
            width: '100%',
            px: 2,
            py: 2
            // height: "100%",
            // overflow: "auto"
          }}
        >
          <Nav tabs>
            <NavItem>
              <NavLink
                active={tabActive === 'zona'}
                onClick={() => {
                  toggleTab('zona')
                }}
              >
                Zona Pengawasan
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                active={tabActive === 'wilayah'}
                onClick={() => {
                  toggleTab('wilayah')
                }}
              >
                Wil. Administratif
              </NavLink>
            </NavItem>

            <NavItem>
              <NavLink
                active={tabActive === 'pengampu'}
                onClick={() => {
                  toggleTab('pengampu')
                }}
              >
                Pengampu
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink
                active={tabActive === 'perekam'}
                onClick={() => {
                  toggleTab('perekam')
                }}
              >
                Perekam
              </NavLink>
            </NavItem>
          </Nav>
          <hr />

          <TabContent className="py-50" activeTab={tabActive}>
            {isTerapkan ? (
              <Row>
                <Col xs="12">
                  <Skeleton width={'100%'} height={'50px'} variant="rectangular" />
                </Col>
              </Row>
            ) : (
              <>
                <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>
                      <Select
                        placeholder="Pilih Seksi"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setSeksiSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={seksiSelected}
                        isClearable={false}
                        options={seksi}
                      />

                      {/* <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>
                      <Select
                        placeholder="Pilih AR"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setArSelected(e)
                        }}
                        classNamePrefix="select"
                        // defaultValue={kanwilSelected}
                        value={arSelected}
                        isClearable={false}
                        options={ar}
                      />
                      {/* <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-2">
                      <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
                    </Col>
                  </Row>
                </TabPane>
                <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>
                      <Select
                        placeholder="Pilih Kecamatan"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKecSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={kecSelected}
                        value={kecSelected}
                        isClearable={false}
                        options={kec}
                      />
                      {/* <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>
                      <Select
                        placeholder="Pilih Kelurahan"
                        className="basic-single w-100"
                        onChange={(e) => {
                          setKelSelected(e)
                        }}
                        classNamePrefix="select"
                        defaultValue={kelSelected}
                        value={kelSelected}
                        isClearable={false}
                        options={kel}
                      />
                      {/* <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="perekam">
                  <NipPerekam
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={tabActive}
                    toast={toast}
                    setHiddenGraphMatoa={false}
                    dataOpsi={dataOpsi}
                    setIsOpenPopUpWilayah={setIsOpenPopUpWilayah}
                    refFeatureBawah={refFeatureBawah}
                  />
                </TabPane>
                <TabPane tabId="pengampu">
                  <NipPengampu
                    dataSend={dataSend}
                    setDataSend={setDataSend}
                    activeTab={tabActive}
                    toast={toast}
                    setHiddenGraphMatoa={false}
                    dataOpsi={dataOpsi}
                    setIsOpenPopUpWilayah={setIsOpenPopUpWilayah}
                    refFeatureBawah={refFeatureBawah}
                  />
                </TabPane>
              </>
            )}
          </TabContent>
          {/* <div style={{ marginBottom: "80px" }}>
            {isTerapkan ? <Skeleton height={"200px"} width={"100%"} variant="rectangular" /> : <TabelHasil setOpen={setIsOpenPopUpWilayah} />}
          </div> */}
          <Paper sx={{ position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 2002 }} elevation={1}>
            <BottomNavigation className="justify-content-between" sx={{ width: '100%', height: '65px' }} showLabels>
              {/* <BottomNavigationAction
                onClick={() => btnBawahProsesOnClick()}
                className="text-primary text-xl"
                sx={{ width: '50%', maxWidth: '50% !important' }}
                label="Terapkan"
                value="proses"
                icon={<CheckCircle />}
              /> */}
              <BottomNavigationAction
                onClick={() => onClickReset()}
                className=" text-xl"
                sx={{ width: '50%', maxWidth: '50% !important' }}
                label="Reset Filter"
                value="clear"
                icon={<AutorenewOutlined color="info" />}
              />
              <BottomNavigationAction
                onClick={() => setIsOpenPopUpWilayah(false)}
                color={red[700]}
                sx={{ width: '50%', maxWidth: '50% !important' }}
                label="Tutup"
                value="close"
                icon={<CloseOutlined color="warning" />}
              />
            </BottomNavigation>
          </Paper>
          <Toast ref={toast} position="center" />
        </Box>
      </SwipeableDrawer>
    </>
  )
}

export default PopUpWilayah