import React from 'react'
import { BottomNavigation, BottomNavigationAction, Box, Paper, Skeleton, SwipeableDrawer, styled } from '@mui/material'
import { lazy, useEffect, useMemo, useRef, useState } from 'react'
import { Card, CardHeader, CardTitle, CardBody, CardText, Input, Label, Row, Col } from 'reactstrap'

import { AutorenewOutlined, CheckCircle, Close, CloseFullscreenRounded, CloseOutlined, CloseRounded, RefreshOutlined } from '@mui/icons-material'

import { red } from '@mui/material/colors'
import { useDispatch, useSelector } 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 { MultiSelect } from 'react-multi-select-component'
import Select from 'react-select'
import jquery from 'jquery'
import { isObjEmpty } from '../kytp/util'

import { 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 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
}))
const PopUPTematikPembayaran = (props) => {
  const { isOpenPopUpPembayaran, setIsOpenPopUpPembayaran, wmsRef, refFeatureBawah, zonaRef, dataSend, setDataSend, dataOpsi, setDataOpsi } = props
  const toast = useRef()
  const map = useMap()
  const dispatch = useDispatch()
  const storePeta = useSelector((state) => state.peta)

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

  const onClickReset = () => {
    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)'
    })

    setIsOpenPopUpPembayaran(false)
  }
  const buttonProsesOnClick = () => {
    // map.removeLayer(matoaLayers.poiMatoaNpwpNullLayer)
    matoaLayers.poiMatoaNpwpNullLayer.removeFrom(map)
    const warna_byr = []
    const warna_spt = []
    const bayarchecked = document.querySelectorAll('.tematik_pembayaran_checkbox:checked')
    const sptchecked = document.querySelectorAll('.tematik_spt_checkbox:checked')

    bayarchecked.forEach((val, idx) => {
      warna_byr.push(val.value)
    })

    sptchecked.forEach((val, idx) => {
      warna_spt.push(val.value)
    })

    // STATUS_SPT_TAHUNAN_TERAKHIR
    if (bayarchecked.length) {
      const par_bayar = warna_byr.join("','")
      const par_spt = warna_spt.join("','")
      const cq_filter_poi_bayar = "WARNA_PEMBAYARAN_THN_TERAKHIR in ('" + par_bayar + "')"
      const cq_filter_poi_spt = "STATUS_SPT_TAHUNAN_TERAKHIR in ('" + par_spt + "')"
      const paramExisting = storePeta.cqlFilterWilayah
      matoaLayers.poiMatoaNpwpLayer.setParams({
        styles: 'poi_matoa_npwp_bayar',
        cql_filter: paramExisting + ' AND ' + cq_filter_poi_bayar + ' AND ' + cq_filter_poi_spt
        // minZoom: 4
      })

      // matoaLayers.poiMatoaNpwpNullLayer.setParams({
      //   style: 'poi_matoa_npwp_bayar',
      //   cql_filter: paramExisting + ' AND ' + cq_filter_poi,
      //   minZoom: 4
      // })

      // map.setZoom(8)
      setIsOpenPopUpPembayaran(false)
    } else {
      toast.current.show({ severity: 'info', summary: 'Info', detail: 'Rentang Pembayaran harus dipilih ' })
    }
  }
  return (
    <>
      <SwipeableDrawer anchor={anchor} open={isOpenPopUpPembayaran} onClose={toggleDrawer(anchor, false)} onOpen={toggleDrawer(anchor, true)}>
        <Box
          sx={{
            flexGrow: 1,
            height: '400px',
            width: '100%',
            overflow: 'auto',
            marginBottom: '80px',
            px: 2,
            py: 2
          }}
        >
          <CardHeader className="mb-0 pb-0">
            <CardTitle className="mb-0 pb-0" tag="h4">
              Tematik Pembayaran
            </CardTitle>
          </CardHeader>
          <CardBody>
            <CardText className="mb-0 pb-0">Pilih rentang pembayaran :</CardText>
            <Row className="">
              <Col sm="12">
                <div className="demo-inline-spacing border  pt-25 pb-2 pl-3 ">
                  {Object.values(storePeta.warnaBayar).map((val, idx) => {
                    return (
                      <div className="form-check form-check-primary " key={idx} style={{ cursor: 'pointer' }}>
                        <Input
                          style={{ cursor: 'pointer' }}
                          type="checkbox"
                          id={`primary-checkbox-${idx}`}
                          className="tematik_pembayaran_checkbox"
                          value={val.wb}
                          defaultChecked
                        />
                        <Label className="form-check-label" for={`primary-checkbox-${idx}`} style={{ color: val.warna, cursor: 'pointer' }}>
                          {val.info}
                        </Label>
                      </div>
                    )
                  })}
                </div>
              </Col>
            </Row>
            <hr />
            <Row className="">
              <Col sm="12">
                <CardText className="mb-0 pb-0">Pilih Status SPT :</CardText>
                <div className="demo-inline-spacing border  pt-25 pb-2 pl-3 ">
                  {Object.values(storePeta.statusSPT).map((val, idx) => {
                    return (
                      <div className="form-check form-check-primary " key={idx} style={{ cursor: 'pointer' }}>
                        <Input
                          style={{ cursor: 'pointer' }}
                          type="checkbox"
                          id={`spt-${idx}`}
                          className="tematik_spt_checkbox"
                          value={val[0].ID_STATUS_SPT}
                          defaultChecked
                        />
                        <Label className="form-check-label" for={`spt-${idx}`} style={{ cursor: 'pointer' }}>
                          {val[0].KETERANGAN}
                        </Label>
                      </div>
                    )
                  })}
                </div>
              </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>
            {/* <div className="form-check form-check-secondary">
                      <Input type="checkbox" id="tematik_pembayaran_checkbox" defaultChecked />
                      <Label className="form-check-label" for="secondary-checkbox">
                        Secondary
                      </Label>
                    </div>
                    <div className="form-check form-check-success">
                      <Input type="checkbox" id="tematik_pembayaran_checkbox" defaultChecked />
                      <Label className="form-check-label" for="success-checkbox">
                        Success
                      </Label>
                    </div>
                    <div className="form-check form-check-danger">
                      <Input type="checkbox" id="tematik_pembayaran_checkbox" defaultChecked />
                      <Label className="form-check-label" for="danger-checkbox">
                        Danger
                      </Label>
                    </div>
                    <div className="form-check form-check-warning">
                      <Input type="checkbox" id="warning-checkbox" defaultChecked />
                      <Label className="form-check-label" for="warning-checkbox">
                        Warning
                      </Label>
                    </div>
                    <div className="form-check form-check-info">
                      <Input type="checkbox" id="info-checkbox" defaultChecked />
                      <Label className="form-check-label" for="info-checkbox">
                        Info
                      </Label>
                    </div> */}
          </CardBody>

          <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={() => onClickReset()}
                className=" text-xl"
                sx={{ width: '50%', maxWidth: '50% !important' }}
                label="Reset Filter"
                value="clear"
                icon={<AutorenewOutlined color="info" />}
              />
              <BottomNavigationAction
                onClick={() => setIsOpenPopUpPembayaran(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 PopUPTematikPembayaran