/* eslint-disable no-unused-vars */
import React from 'react'
import { register } from 'swiper/element/bundle'
register()
import Swiper from 'swiper'
// import { Navigation, Pagination } from 'swiper/modules'
// import Swiper and modules styles
import 'swiper/css'
import 'swiper/css/navigation'
import 'swiper/css/pagination'
import { Button, Card, CardBody } from 'reactstrap'
import { useEffect, useState } from 'react'
import { FilterAlt, Money, UploadFile } from '@mui/icons-material'
// import 'primereact/resources/themes/lara-light-cyan/theme.css'
// import PoiInRadiusCenter from "./PoiInRadiusCenter"
// import PopUpWilayah from "./PopUpFilter/PoUpWilayah"
// import { GeoJSON } from 'react-leaflet'
import { useDispatch, useSelector } from 'react-redux'
import PopUpWilayah from './PoUpWilayah'
import jquery from 'jquery'
// import { matoaLayers } from './layers/overlayLayers'
import PopUPTematikPembayaran from './PopUPTematikPembayaran'
import PopUpRatingGoogle from './PopUpRatingGoogle'
// import PoiInRadiusCenter from "./PoiInRadiusCenter"
const MenuBawah = (props) => {
  const { wmsRef, refFeatureBawah, zonaRef, dataSend, setDataSend } = props
  const [isOpenPopUpWilayah, setIsOpenPopUpWilayah] = useState(false)
  const [isOpenPopUpPembayaran, setIsOpenPopUpPembayaran] = useState(false)
  const [isOpenPopUpRating, setIsOpenPopUpRating] = useState(false)
  // const storeMap = useSelector((state) => state.crmmap)
  const [dataOpsi, setDataOpsi] = useState({})
  // const [filterWilayah, setFilterWilayah] = useState('(1=1)')
  useEffect(() => {
    new Swiper('.swiper', {
      slidesPerView: 4,

      grid: {
        rows: 0
      },
      mousewheel: {
        forceToAxis: false
      },
      focusableElements: true,
      allowTouchMove: true
    })
  }, [])
  const onClickWilayah = (e) => {
    // console.log(e.target)
    setIsOpenPopUpWilayah(true)
  }
  const onClickRatingUlasan = (e) => {
    // console.log(e)
    setIsOpenPopUpRating(true)
  }
  const dispatch = useDispatch()
  useEffect(() => {
    jquery.getJSON('/engineN/kewilayahan/ref/opsi').then((response) => {
      setDataOpsi(response)
      dispatch(setSelectedOpsi(response.default))
    })
  }, [])

  const onClick = () => {}
  return (
    <>
      <Card className="p-0 m-0" color="primary" style={{ borderRadius: 0, minWidth: '400px', zIndex: 300 }}>
        <CardBody className="p-0" style={{ width: '100vw' }}>
          <div className="swiper" style={{ minWidth: '400px' }}>
            <div className="swiper-wrapper" onClick={(e) => onClick(e)}>
              <swiper-slide class="d-flex justify-content-center">
                <Button
                  onClick={(e) => onClickWilayah(e)}
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <FilterAlt fontSize="medium" className="align-self-center" />
                  <span className="text-xs align-self-center">Filter</span>
                </Button>
              </swiper-slide>

              {/* <swiper-slide class="d-flex justify-content-center">
                <Button
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <Category fontSize="medium" className="align-self-center" />
                  <span className="text-xs align-self-center">Kategori</span>
                </Button>
              </swiper-slide> */}
              <swiper-slide class="d-flex justify-content-center">
                <Button
                  onClick={(e) => {
                    // console.log(matoaLayers.poiMatoaNpwpLayer.wmsParams.cql_filter)
                    setIsOpenPopUpPembayaran(true)
                  }}
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <div className="flex justify-content-around">
                    <Money fontSize="medium" className="align-self-center" /> <UploadFile fontSize="medium" className="align-self-center" />
                  </div>
                  <span className="text-xs align-self-center">Pembayaran & SPT</span>
                </Button>
              </swiper-slide>
              {/* <swiper-slide class="d-flex justify-content-center">
                <Button
                  onClick={(e) => onClickRatingUlasan(e)}
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <RateReview fontSize="medium" className="align-self-center" />
                  <span className="text-xs align-self-center text-nowrap">Rating & Ulasan Google</span>
                </Button>
              </swiper-slide> */}
              {/* <swiper-slide class="d-flex justify-content-center">
                <Button
                  onClick={(e) => onClick(e)}
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <UploadFile fontSize="medium" className="align-self-center" />
                  <span className="text-xs align-self-center">SPT</span>
                </Button>
              </swiper-slide> */}
              {/* <swiper-slide class="d-flex justify-content-center">
                <Button
                  onClick={(e) => onClick(e)}
                  style={{ borderRadius: 0 }}
                  tag={'button'}
                  className="py-50 d-flex flex-column justify-content-center align-content-center"
                  color="primary"
                  size="lg"
                >
                  <PointOfSale fontSize="medium" className="align-self-center" />
                  <span className="text-xs align-self-center">Potensi</span>
                </Button>
              </swiper-slide> */}
            </div>
          </div>
          <div className="swiper-scrollbar"></div>
        </CardBody>
      </Card>
      <div id="aaa" style={{ zIndex: 200 }}></div>
      <PopUpWilayah
        dataSend={dataSend}
        setDataSend={setDataSend}
        dataOpsi={dataOpsi}
        setDataOpsi={setDataOpsi}
        isOpenPopUpWilayah={isOpenPopUpWilayah}
        setIsOpenPopUpWilayah={setIsOpenPopUpWilayah}
        wmsRef={wmsRef}
        zonaRef={zonaRef}
        refFeatureBawah={refFeatureBawah}
      />
      <PopUPTematikPembayaran
        dataSend={dataSend}
        setDataSend={setDataSend}
        dataOpsi={dataOpsi}
        setDataOpsi={setDataOpsi}
        isOpenPopUpPembayaran={isOpenPopUpPembayaran}
        setIsOpenPopUpPembayaran={setIsOpenPopUpPembayaran}
        wmsRef={wmsRef}
        zonaRef={zonaRef}
        refFeatureBawah={refFeatureBawah}
      />
      <PopUpRatingGoogle
        dataSend={dataSend}
        setDataSend={setDataSend}
        dataOpsi={dataOpsi}
        setDataOpsi={setDataOpsi}
        isOpenPopUpRating={isOpenPopUpRating}
        setIsOpenPopUpRating={setIsOpenPopUpRating}
        wmsRef={wmsRef}
        zonaRef={zonaRef}
        refFeatureBawah={refFeatureBawah}
      />
    </>
  )
}
export default MenuBawah