import React, { useEffect, useMemo, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { store } from '../kytp/store/store'
import { Provider, useDispatch, useSelector } from 'react-redux'
import { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle, Col, Label, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap'
import collect from 'collect.js'
import { MultiSelect } from 'react-multi-select-component'
import { Toast } from 'primereact/toast'
import { Button as ButtonP } from 'primereact/button'
import 'primereact/resources/themes/bootstrap4-light-blue/theme.css'
import 'primeflex/primeflex.css'
import Tanggal from '../commons/Tanggal'
import jquery, { data, getJSON } from 'jquery'
import Kanwil from './componentMonitoring/Kanwil'
import Kpp from './componentMonitoring/Kpp'
import Seksi from './componentMonitoring/Seksi'
import { TabPanel, TabView } from 'primereact/tabview'
import Pegawai from './componentMonitoring/Pegawai'
import { setDataMonitoringPerubahanPerilakuPenambahanWpBayar, setDataUrut, setDataUrutPerubahanPerilakuPenambahanWpBayar } from '../kytp/store/KpdlStore'
import { Skeleton } from 'primereact/skeleton'
import { Calendar } from 'primereact/calendar'
import PenambahanWpBayar from './grafik/PenambahanWpBayar'
const date = new Date()

const App = () => {
  const base_url = '/engineN/'
  const toast = useRef(null)
  const [active, setActive] = useState(0)
  const refTab = useRef()
  const toggle = (tab) => {
    setActive(tab)
  }
  const [kanwil, setKanwil] = useState([])
  const [kanwilSelected, setKanwilSelected] = useState([])
  const [kpp, setKpp] = useState([])
  const [kppSelected, setKppSelected] = useState([])
  const [tanggalAwal, setTanggalAwal] = useState(new Date(date.getFullYear(), 0, 1).toISOString())
  const [tanggalAkhir, setTanggalAkhir] = useState(date.toISOString())
  const [paramSelected, setParamSelected] = useState({})
  const [loading, setLoading] = useState(false)
  const storeKpdl = useSelector((state) => state.kpdl)
  const dispatch = useDispatch()
  const [tahun, setTahun] = useState(new Date(date.getFullYear(), 0, 1))
  useEffect(() => {
    jquery.ajax({
      url: base_url + 'kewilayahan/ref/kanwil',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setKanwil(data)
      }
    })
  }, [])

  useEffect(() => {
    const kanwil = collect(kanwilSelected).pluck('value').all()
    setKppSelected([])
    setKpp([])

    if (!kanwil.length) {
      return
    }
    jquery.ajax({
      url: base_url + 'kewilayahan/ref/kppmultikanwil',
      method: 'POST',
      dataType: 'json',
      data: {
        kanwil
      },
      success: (data) => {
        setKpp(data)
      }
    })
  }, [kanwilSelected])

  const buttonProsesOnClick = () => {
    // console.log(tahun.getFullYear)
    if (!kppSelected.length) {
      return toast.current.show({ severity: 'info', summary: 'Info', detail: 'KPP harus dipilih' })
    }

    if (!tahun) {
      return toast.current.show({ severity: 'info', summary: 'Info', detail: 'Periode Awal harus dipilih' })
    }

    setActive(0)
    setParamSelected({
      kanwilSelected,
      kppSelected,
      tahun
    })

    const kanwil = collect(kanwilSelected).pluck('value').all()
    const kpp = collect(kppSelected).pluck('value').all()
    setLoading(true)
    jquery
      .ajax({
        url: base_url + 'kewilayahan/monitoring/perubahanperilaku/penambahananwpbayar',
        method: 'POST',
        dataType: 'json',
        data: {
          kanwil,
          kpp,
          tahun: tahun.getFullYear()
        },
        success: (dataReturn) => {
          dispatch(setDataMonitoringPerubahanPerilakuPenambahanWpBayar(dataReturn.data))
          dispatch(
            setDataUrutPerubahanPerilakuPenambahanWpBayar({
              urutKanwil: dataReturn.urutKanwil,
              urutKpp: dataReturn.urutKpp,
              urutSeksi: dataReturn.urutSeksi,
              urutPegawai: dataReturn.urutPegawai
            })
          )
        }
      })
      .done(() => {
        setLoading(false)
      })
  }
  useEffect(() => {
    let judul = document.getElementById('judul')
    judul.innerHTML = '<h3><b><strong>E-Geospatial Thematic Tax</strong></b></h3>'
  }, [])
  return (
    <>
      <Card>
        <CardHeader className="pb-1">
          <CardTitle tag={'h5'}>Pilih Unit Kerja Pengampu</CardTitle>
        </CardHeader>
        <CardBody className="pt-1">
          <Row className="mt-2">
            <Col md="3">
              <Label className="form-label" for="Pilih Kanwil">
                Kanwil
              </Label>
              <MultiSelect
                className="me-1 w-full multi-select"
                hasSelectAll={true}
                debounceDuration={300}
                options={kanwil}
                value={kanwilSelected}
                onChange={(e) => {
                  setKanwilSelected(e)
                }}
                labelledBy="Pilih Kanwil"
                overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih Kanwil' }}
              />
            </Col>
            <Col md="3">
              <Label className="form-label" for="Pilih KPP">
                KPP
              </Label>
              <MultiSelect
                className="me-1 w-full  multi-select"
                hasSelectAll={true}
                debounceDuration={300}
                options={kpp}
                value={kppSelected}
                onChange={(e) => {
                  setKppSelected(e)
                }}
                labelledBy="Pilih KPP"
                overrideStrings={{ allItemsAreSelected: 'Semua dipilih', selectSomeItems: 'Pilih KPP' }}
              />
            </Col>
            <Col md="2">
              <Label className="form-label" for="Pilih Tahun">
                Tahun
              </Label>
              <Calendar
                ariaLabel="Pilih Tahun"
                value={tahun}
                onChange={(e) => {
                  console.log(e)
                  setTahun(e.value)
                }}
                view="year"
                dateFormat="yy"
                minDate={new Date('2024-01-01')}
                maxDate={new Date(date.getFullYear() + 1, 0, 1)}
              />
              {/* <Tanggal setValue={setTanggalAwal} value={tanggalAwal} startOrEnd={'Periode Awal'} /> */}
            </Col>
            <Col md="2">{/* <Tanggal setValue={setTanggalAkhir} value={tanggalAkhir} startOrEnd={'Periode Akhir'} /> */}</Col>
            <Col md="2" className="pt-4">
              <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
            </Col>
          </Row>
        </CardBody>
      </Card>
      <Card>
        <CardBody className="pb-1">
          <h5>
            Monitoring Perubahan Perilaku WP: <small>Semula tidak bayar menjadi bayar</small>
          </h5>
          <CardSubtitle className="pb-0 mb-0 text-red-400">Berdasarkan assignment WP sesuai dengan lingkup pilihan pencarian</CardSubtitle>
        </CardBody>
        <CardBody className="pt-1">
          {loading ? (
            <Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton>
          ) : (
            <>
              <Row>
                <Col md="12">
                  <TabView
                    activeIndex={active}
                    scrollable
                    onTabChange={(e) => setActive(e.index)}
                    className="p-0"
                    pt={{ panelContainer: { className: 'p-0' } }}
                  >
                    <TabPanel id="tab_1" header="Kanwil" className="p-0">
                      <Kanwil />
                    </TabPanel>
                    <TabPanel id="tab_2" header="KPP" className="p-0">
                      <Kpp />
                    </TabPanel>

                    <TabPanel id="tab_3" header="Seksi" className="p-0">
                      <Seksi />
                    </TabPanel>

                    <TabPanel id="tab_4" header="Aktor" className="p-0">
                      <Pegawai />
                    </TabPanel>
                  </TabView>
                </Col>
              </Row>
            </>
          )}
        </CardBody>
      </Card>
      <Card>
        <CardBody className="mt-4">
          {loading ? (
            <Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton>
          ) : (
            <Row>
              <Col md="12">
                <PenambahanWpBayar />
              </Col>
            </Row>
          )}
        </CardBody>
      </Card>
      <Row>
        <Toast ref={toast} />
      </Row>
    </>
  )
}

const container = document.getElementById('app')
const component = (
  <Provider store={store}>
    <App />
  </Provider>
)

ReactDOM.render(component, container)