import React from 'react'
import { BottomNavigation, BottomNavigationAction, Box, Paper, Skeleton, Slider, 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
}))
function valuetext(value) {
  return `${value}`
}
const PopUpRatingGoogle = (props) => {
  const { isOpenPopUpRating, setIsOpenPopUpRating, wmsRef, refFeatureBawah, zonaRef, dataSend, setDataSend, dataOpsi, setDataOpsi } = props
  const toast = useRef()
  const map = useMap()
  const dispatch = useDispatch()
  const storePeta = useSelector((state) => state.peta)
  const [value, setValue] = React.useState(50)

  const handleChange = (event, newValue) => {
    setValue(newValue)
  }

  const toggleDrawer = (anchor, open) => (event) => {
    if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
      return
    }
    setIsOpenPopUpRating(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 = () => {
    const cq_filter_poi = "REVIEW >= '" + value + "'"
    const paramExisting = storePeta.cqlFilterWilayah
    matoaLayers.poiGoogleLayer.setParams({
      styles: 'poi_google',
      cql_filter: paramExisting + ' AND ' + cq_filter_poi
    })

    setIsOpenPopUpRating(false)
  }
  return (
    <>
      <SwipeableDrawer anchor={anchor} open={isOpenPopUpRating} 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">
              Filter Jumlah Ulasan Poi Google
            </CardTitle>
          </CardHeader>
          <hr />
          <CardBody>
            <CardText className="mb-0 pb-0">Seret ke kanan/kiri minimal jumlah ulasan :</CardText>
            <Row className="">
              <Col sm="12" className="mt-3">
                <Slider
                  aria-label="Small steps"
                  defaultValue={100}
                  getAriaValueText={valuetext}
                  step={100}
                  marks
                  min={0}
                  max={10000}
                  valueLabelDisplay="auto"
                  onChange={handleChange}
                />
              </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>
          </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={() => setIsOpenPopUpRating(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 PopUpRatingGoogle