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