import React, { useEffect, useRef, useState } from 'react'
import ReactDOM from 'react-dom'
import { Card, CardBody, CardHeader, CardText, 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 { store } from '../kytp/store/store'
import { Provider } from 'react-redux'

const App = () => {
  const base_url = '<?=base_url()?>'
  const [kanwil, setKanwil] = useState([])
  const [kanwilSelected, setKanwilSelected] = useState([])
  const [kpp, setKpp] = useState([])
  const [kppSelected, setKppSelected] = useState([])

  useEffect(() => {
    $.ajax({
      url: base_url + 'kewilayahan/ref/kanwil',
      method: 'GET',
      dataType: 'json',
      success: (data) => {
        setKanwil(data)
      }
    })
  }, [])

  useEffect(() => {
    $.ajax({
      url: base_url + 'kewilayahan/ref/kpp',
      method: 'POST',
      dataType: 'json',
      success: (data) => {
        setKpp(data)
      }
    })
  }, [kanwilSelected])

  return (
    <>
      <Card>
        <CardBody>
          <Row className="mt-2">
            <Col md="4">
              <Label className="form-label" for="Pilih Kanwil">
                Kanwil
              </Label>
              <MultiSelect
                className="me-1 w-full"
                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="4">
              <Label className="form-label" for="Pilih KPP">
                KPP
              </Label>
              <MultiSelect
                className="me-1 w-full"
                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="3" className="pt-4">
              <ButtonP onClick={() => buttonProsesOnClick()} label="Proses" severity="" rounded className="w-10rem text-white text-base" />
            </Col>
          </Row>
        </CardBody>
      </Card>
    </>
  )
}

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

ReactDOM.render(component, container)