import React, { useEffect, useRef, useState } from "react"
import { Col, Row, Table } from "reactstrap"
import { format_angka } from "../util"
import collect from "collect.js"
import $ from "jquery"
const date = new Date()
const cBulan = date.getMonth() + 1
import { Skeleton } from "primereact/skeleton"
const Sof = ({ dataSend }) => {
  const base_url = "<?=base_url()?>"

  const [data, setData] = useState([])
  const [total, setTotal] = useState({ totalC: 0, totalP1: 0, totalP2: 0 })
  const [loading, setLoading] = useState(false)
  const currentMonth = "<?=currentMonth()?>"
  const currentYear = "<?=currentYear()?>"
  useEffect(() => {
    setLoading(true)
    $.get({
      url: base_url + "kewilayahan/kytp/sebaranSof",
      dataType: "json",
      type: "POST",
      data: {
        ...dataSend,
        tahun: currentYear,
        bulan: currentMonth
      },
      success: (data) => {
        setData(data.data)
        setTotal({
          totalC: collect(data.data).sum("JML_C"),
          totalP1: collect(data.data).sum("JML_P1"),
          totalP2: collect(data.data).sum("JML_P2")
        })
        setLoading(false)
      }
    })
  }, [dataSend])

  return (
    <>
      {loading ? (
        <Row>
          <Col>
            <Skeleton className="" shape="rectangle" height="20rem" width="100%"></Skeleton>
          </Col>
        </Row>
      ) : (
        <Row>
          <Col>
            <div className="d-flex justify-content-center">
              <Table bordered style={{ width: "auto", fontSize: "0.85rem" }}>
                <thead className="bg-primary text-white">
                  <tr>
                    <th class="text-center text-white" rowspan="2">
                      Lapisan
                    </th>
                    <th class="text-center text-white" colspan="2">
                      s.d Sekarang
                    </th>
                    <th class="text-center text-white" colspan="2">
                      s.d Bulan Lalu
                    </th>
                    <th class="text-center text-white" colspan="2">
                      s.d 2 Bulan Lalu
                    </th>
                  </tr>
                  <tr>
                    <th class="text-center text-white">Jml WP</th>
                    <th class="text-center text-white">%</th>
                    <th class="text-center text-white">Jml WP</th>
                    <th class="text-center text-white">%</th>
                    <th class="text-center text-white">Jml WP</th>
                    <th class="text-center text-white">%</th>
                  </tr>
                  <tr class="">
                    <th class="text-center text-white">1</th>
                    <th class="text-center text-white">2</th>
                    <th class="text-center text-white">3</th>
                    <th class="text-center text-white">4</th>
                    <th class="text-center text-white">5</th>
                    <th class="text-center text-white">6</th>
                    <th class="text-center text-white">7</th>
                  </tr>
                </thead>
                <tbody>
                  {data.map((val, idx) => {
                    return (
                      <tr id={idx}>
                        <td class="text-start p-1 font-weight-bold">{val.LAPISAN}</td>
                        <td class="text-center p-1">{val.JML_C}</td>
                        <td class="text-center p-1">{((val.JML_C / total.totalC) * 100).toFixed(2) + "%"}</td>
                        <td class="text-center p-1">{val.JML_P1}</td>
                        <td class="text-center p-1">{((val.JML_P1 / total.totalP1) * 100).toFixed(2) + "%"}</td>
                        <td class="text-center p-1">{val.JML_P2}</td>
                        <td class="text-center p-1">{((val.JML_P2 / total.totalP2) * 100).toFixed(2) + "%"}</td>
                      </tr>
                    )
                  })}
                </tbody>
                <tfoot>
                  <tr className="font-weight-bold">
                    <td class="text-center">Total</td>
                    <td class="text-center">{total.totalC}</td>
                    <td class="text-center">100%</td>
                    <td class="text-center">{total.totalP1}</td>
                    <td class="text-center">100%</td>
                    <td class="text-center">{total.totalP2}</td>
                    <td class="text-center">100%</td>
                  </tr>
                </tfoot>
              </Table>
            </div>
          </Col>
        </Row>
      )}
    </>
  )
}

export default Sof