import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
// import Highcharts from 'highcharts'
// import HighchartsReact from 'highcharts-react-official'
// import { Button, CardText, Col, Row, Tag, UncontrolledTooltip } from 'reactstrap'
// import { Badge } from 'primereact/badge'
import { Button as ButtonP } from 'primereact/button'
import { format_angka } from '../util'
// import collect from 'collect.js'
import jquery from 'jquery'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
// import Avatar from '../../commons/avatar'
// import classnames from 'classnames'
// import { Sidebar } from 'primereact/sidebar'
// import { MantineReactTable, useMantineReactTable } from 'mantine-react-table'
// import { Text } from '@mantine/core'

// import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query'
// import dayjs from 'dayjs'
import { Skeleton } from '@mui/material'
// import { ArchiveRounded, Money, MoneyRounded } from '@mui/icons-material'
import 'primeicons/primeicons.css'
import { useDispatch, useSelector } from 'react-redux'
import { setProgresifitasPembayaran } from '../store/KpdlStore'
import Pembayaran from './tabelPerubahanPerilaku/pembayaran'
import { Col, Row } from 'reactstrap'
import Pendaftaran from './tabelPerubahanPerilaku/Pendaftaran'

var relativeTime = require('dayjs/plugin/relativeTime')
const fetchSize = 101

const PerubahanPerilaku = ({ dataSend }) => {
  const base_url = '/engineN/'
  const [data, setData] = useState(null)
  const [selectedBulan, setSelectedBulan] = useState('')
  const [selectedBulanText, setSelectedBulanText] = useState('semua')
  const [bulan, setBulan] = useState([])

  const [query, setQuery] = useState(null)
  const [loading, setLoading] = useState(false)

  const [jenisPerubahan, setJenisPerubahan] = useState({ pembayaran: { nilai: 0 } }, { pelaporan: { nilai: 0 } })
  const kpdlStore = useSelector((state) => state.kpdl)
  const dispatch = useDispatch()

  const [visibleSidebar1, setVisibleSidebar1] = useState(false)
  const [visibleSidebar2, setVisibleSidebar2] = useState(false)
  const [visibleSidebar3, setVisibleSidebar3] = useState(false)
  useEffect(() => {
    setLoading(true)
    jquery.get({
      url: base_url + 'kewilayahan/kytp/perubahanperilaku',
      dataType: 'json',
      type: 'POST',
      data: {
        ...dataSend
      },
      success: (data) => {
        setData(data)
        dispatch(setProgresifitasPembayaran(data.dataC))
        setLoading(false)
      }
    })
  }, [dataSend])

  // useEffect(() => {
  //   const filtered = kpdlStore.progresifitasPembayaran ? kpdlStore.progresifitasPembayaran.filter((val, key) => val.color === 'black') : 0
  //   // console.log({ filtered })
  // }, [kpdlStore])
  return (
    <>
      <Row>
        <Col sm="12">
          <h5 className="mb-4 text-center f-16  fw-600 text-700">Perubahan Perilaku WP Pasca kegiatan Matoa</h5>
          <div className="grid">
            <div className="col-12 md:col-6 lg:col-3">
              <div className="surface-0 shadow-2 p-3 border-1 border-50 border-round">
                <div className="flex justify-content-between mb-3">
                  <div>
                    <span className="block text-700 font-medium mb-3">Pembayaran</span>
                    <div className="text-900 font-medium text-xl">
                      {loading ? (
                        <Skeleton width={'60px'} height={'60px'} variant="rectangular" />
                      ) : (
                        <ButtonP
                          placeholder="Right"
                          tooltip="Semula tidak bayar menjadi bayar"
                          className="text-white"
                          label={data?.pembayaran}
                          severity=""
                          rounded
                          onClick={() => setVisibleSidebar1(true)}
                        />
                      )}
                    </div>
                  </div>
                  <div className="flex align-items-center justify-content-center bg-green-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                    <i className="pi pi-money-bill text-green-500 text-xl"></i>
                  </div>
                </div>
                <span className="text-green-500 font-medium">Rp {format_angka(data?.pembayaranRupiah ?? 0)}</span>
                {/* <span className="text-500">since last visit</span> */}
              </div>
            </div>
            <div className="col-12 md:col-6 lg:col-3">
              <div className="surface-0 shadow-2 p-3 border-1 border-50 border-round">
                <div className="flex justify-content-between mb-3">
                  <div>
                    <span className="block text-600 font-medium mb-3">SPT Tahunan</span>
                    <div className="text-900 font-medium text-xl">
                      {loading ? (
                        <Skeleton width={'60px'} height={'60px'} variant="rectangular" />
                      ) : (
                        <ButtonP className="text-white" disabled label={data?.pelaporan} severity="secondary" rounded />
                      )}
                    </div>
                  </div>
                  <div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                    <i className="pi pi-envelope text-orange-500 text-xl"></i>
                  </div>
                </div>
                <span className="text-green-500 font-medium">-</span>
                {/* <span className="text-500">since last week</span> */}
              </div>
            </div>

            <div className="col-12 md:col-6 lg:col-3">
              <div className="surface-0 shadow-2 p-3 border-1 border-50 border-round">
                <div className="flex justify-content-between mb-3">
                  <div>
                    <span className="block text-600 font-medium mb-3">Penambahan NPWP</span>
                    <div className="text-900 font-medium text-xl">
                      {loading ? (
                        <Skeleton width={'60px'} height={'60px'} variant="rectangular" />
                      ) : (
                        <ButtonP
                          className="text-white"
                          disabled
                          label={data?.pendaftaran}
                          severity="secondary"
                          rounded
                          onClick={() => setVisibleSidebar2(true)}
                        />
                      )}
                    </div>
                  </div>
                  <div className="flex align-items-center justify-content-center bg-purple-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
                    <i className="pi pi-user-plus text-purple-500 text-xl"></i>
                  </div>
                </div>
                <span className="text-green-500 font-medium">-</span>
                {/* <span className="text-500">since last week</span> */}
              </div>
            </div>
          </div>
        </Col>
      </Row>
      <Pembayaran dataSend={dataSend} visibleSidebar={visibleSidebar1} setVisibleSidebar={setVisibleSidebar1} />
      <Pendaftaran dataSend={dataSend} visibleSidebar={visibleSidebar2} setVisibleSidebar={setVisibleSidebar2} />
    </>
  )
}

export default PerubahanPerilaku