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 { setDataMonitoring, setDataUrut } from '../kytp/store/KpdlStore'
import { Skeleton } from 'primereact/skeleton'
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()

  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 = () => {
    if (!kppSelected.length) {
      return toast.current.show({ severity: 'info', summary: 'Info', detail: 'KPP harus dipilih' })
    }

    if (!tanggalAwal) {
      return toast.current.show({ severity: 'info', summary: 'Info', detail: 'Periode Awal harus dipilih' })
    }
    if (!tanggalAkhir) {
      return toast.current.show({ severity: 'info', summary: 'Info', detail: 'Periode Akhir harus dipilih' })
    }
    setActive(0)
    setParamSelected({
      kanwilSelected,
      kppSelected,
      tanggalAwal,
      tanggalAkhir
    })

    const kanwil = collect(kanwilSelected).pluck('value').all()
    const kpp = collect(kppSelected).pluck('value').all()
    setLoading(true)
    jquery
      .ajax({
        url: base_url + 'kewilayahan/monitoring/kegiatan/data',
        method: 'POST',
        dataType: 'json',
        data: {
          kanwil,
          kpp,
          tanggalAwal,
          tanggalAkhir
        },
        success: (dataReturn) => {
          dispatch(setDataMonitoring(dataReturn.data))
          dispatch(
            setDataUrut({
              urutKanwil: dataReturn.urutKanwil,
              urutKpp: dataReturn.urutKpp,
              urutSeksi: dataReturn.urutSeksi,
              urutPegawai: dataReturn.urutPegawai
            })
          )
        }
      })
      .done(() => {
        setLoading(false)
      })
  }

  return (
    <>
      <Card>
        <CardHeader className="pb-1">
          <CardTitle tag={'h5'}>Pilih Unit Kerja Perekam dan Tanggal Kegiatan</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">
              <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">
          <CardTitle tag={'h5'}>Monitoring Kegiatan KPDL Seksi Pengawasan</CardTitle>
          <CardSubtitle className="pb-0 mb-0 text-red-400">Sesuai dengan lingkup pilihan pencarian</CardSubtitle>
        </CardBody>
        <CardBody className="pt-1">
          {loading ? (
            <Skeleton className="" shape="rectangle" height="17rem" width="100%"></Skeleton>
          ) : (
            <>
              <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>
            </>
          )}
        </CardBody>
        <CardFooter></CardFooter>
      </Card>

      <Row>
        <Toast ref={toast} />
      </Row>
    </>
  )
}

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

ReactDOM.render(component, container)