import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import { Row, Col, Button, Card, CardBody, Table } from "reactstrap";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import Router from "next/router";
import TableRiwayat from "@/components/Riwayat/TableRiwayat";
import ChartData from "@/components/Riwayat/ChartData";
import ChartDataBar from "@/components/Riwayat/ChartDataBar";
import Maps from "@/components/Riwayat/Maps"
import TableRiwayatt from "../../../components/Riwayat/TableRiwayatt";
import TableRadarr from "../../../components/Riwayat/TableRadarr";
import { getjumlahStatusLaporan } from "../../../actions/graph";
import ChartRadarB from "../../../components/Riwayat/ChartRadarB";
import ChartRadarA from "../../../components/Riwayat/ChartRadarA";




class Riwayat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      jumlahStatusLaporan: {}
    };
  }
  handleClick = (e, idPembina) => {
    e.preventDefault();
    Router.push({
      pathname: "/app/riwayat/detail",
      query: { id: idPembina },
    });
  };

  componentDidMount = async () => {
    const { token } = this.props;
    const jumlahStatusLaporan = await getjumlahStatusLaporan(token);
    this.setState({ jumlahStatusLaporan });
  };


  render() {
    const { jumlahStatusLaporan } = this.state;
    return (
      <ContentWrapper>
        <div className="content-heading">
          <span className="font-color-white">Riwayat</span>
        </div>
        <Row>
          <Col lg="6">
            <ChartDataBar />
          </Col>
          <Col lg="6">
            <Maps />
          </Col>
          <Col lg="6">
            <ChartRadarA />
          </Col>
          <Col lg="6">
            <ChartRadarB />
          </Col>
          <Col lg="12">
            {/* {jumlahStatusLaporan?.data ? <TableRadarr listData={jumlahStatusLaporan.data} to="/app/riwayat/detail" /> : <Loader />} */}
            <Card className="card-default">
              <CardBody>
                <Table bordered responsive>
                  <thead>
                    <tr >
                      <th>Wilayah LLDikti\Menu</th>
                      <th style={{
                        backgroundColor: '#80b1ff',
                        color: "black",
                      }}>Penjadwalan Evaluasi</th>
                      <th style={{
                        backgroundColor: '#de8383',
                        color: "black",
                      }}>Pemeriksaan</th>
                      <th style={{
                        backgroundColor: '#fdda80',
                        color: "black",
                      }}>Sanksi</th>
                      <th style={{
                        backgroundColor: '#cfab80',
                        color: "black",
                      }}>Keberatan</th>
                      <th style={{
                        backgroundColor: '#ef90df',
                        color: "black",
                      }}>Banding</th>
                      <th style={{
                        backgroundColor: '#80df89',
                        color: "black",
                      }}>Pemantauan Perbaikan</th>
                      <th style={{
                        backgroundColor: '#a3d4d1',
                        color: "black",
                      }}>Pencabutan Sanksi</th>
                      <th style={{
                        backgroundColor: '#a3d4d1',
                        color: "black",
                      }}>Lihat laporan</th>
                      {/* <th style={{
                        backgroundColor: '#a3d4d1',
                        color: "black",
                      }}>list laporan</th> */}
                    </tr>
                  </thead>
                  {jumlahStatusLaporan.data && jumlahStatusLaporan.data.map((data) => {
                    return (
                      <tr key={data.id}>
                        <td>{data.pembina.name}</td>
                        <td style={{
                          backgroundColor: '#80b1ff',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_jadwal_evaluasi}</td>
                        <td style={{
                          backgroundColor: '#de8383',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_pemeriksaan}</td>
                        <td style={{
                          backgroundColor: '#fdda80',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_sanksi}</td>
                        <td style={{
                          backgroundColor: '#cfab80',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_keberatan}</td>
                        <td style={{
                          backgroundColor: '#ef90df',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_banding}</td>
                        <td style={{
                          backgroundColor: '#80df89',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_pemantauan_perbaikan}</td>
                        <td style={{
                          backgroundColor: '#a3d4d1',
                          color: "black",
                          textAlign: "center",
                        }}>{data.jumlah_pencabutan_sanksi}
                        </td>

                        <td style={{
                          backgroundColor: '#a3d4d1',
                          color: "black",
                          textAlign: "center",
                        }}><div className="ml-auto">
                            <Button className="color-3e3a8e" color size="sm" onClick={(e) => this.handleClick(e, data.pembina.id)}>
                              <span className="font-color-white">
                                View
                              </span>
                            </Button>
                          </div>
                        </td>

                      </tr>)
                  })}
                </Table>
              </CardBody>
            </Card>
          </Col>
          {/* <Col lg="12">
            {jumlahStatusLaporan?.data ? <TableRadar listData={jumlahStatusLaporan.data} /> : <Loader />}
          </Col> */}
          <ChartData />
          {/* <TableRiwayat /> */}
          <Col lg="12">
            <TableRiwayatt />
          </Col>
        </Row>
      </ContentWrapper>
    );
  }
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(Riwayat);