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 ChartDataBar from "@/components/Riwayat/ChartDataBar";
import Maps from "@/components/Riwayat/Maps"
import TableRadar from "../../../components/Riwayat/TableRadar";
import { getjumlahStatusLaporan } from "../../../actions/graph";
import ChartRadarB from "../../../components/Riwayat/ChartRadarB";
import ChartRadarA from "../../../components/Riwayat/ChartRadarA";




class Dashboard 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">Dashboard</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 ? <TableRadar listData={jumlahStatusLaporan.data} to="/app/dashboard/detail" jadwal="/app/dashboard/penjadwalan" all_Laporan="/app/dashboard/all_Laporan" pemeriksaan="/app/dashboard/pemeriksaan" sanksi="/app/dashboard/sanksi" keberatan="/app/dashboard/keberatan" banding="/app/dashboard/banding" perbaikan="/app/dashboard/perbaikan" cabutSanksi="/app/dashboard/cabutSanksi" linkName="Lihat" /> : <Loader />}
          </Col>
        </Row>
      </ContentWrapper>
    );
  }
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(Dashboard);