import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Row, Col } from "reactstrap";
import { getPelaporan } from "@/actions/pelaporan";
import { getGraph, getExcel,getlaporanselesai } from "@/actions/graph";
import CaseProgress from "@/components/PelaporanTuntas/CaseProgress";
import TableLaporan from "@/components/PelaporanTuntas/TableLaporan";
import { connect } from "react-redux";
import Loader from "@/components/Common/Loader";
import Link from "next/link";
import Button from "reactstrap/lib/Button";
import Router from "next/router";

class PelaporanTuntas extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pelaporan: {},
            graph: {},
            tahun: new Date().getFullYear(),
            laporanSelesai: {}
        };
    }

    componentDidMount = async () => {
        const { token } = this.props;
        let laporanSelesai = await getlaporanselesai(token);
        laporanSelesai = {...laporanSelesai, data: {
            ...laporanSelesai.data, laporan: [...laporanSelesai.data.laporan, ...laporanSelesai.data.sanksi], sanksi: null
        }}
        const pelaporan = await getPelaporan(token, { jadwal: true, aktif: false });
        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, aktif: false });
        this.setState({ pelaporan, graph, laporanSelesai });
    };

    nextButton = async () => {
        const tahun = this.state.tahun + 1;
        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
        this.setState({ graph, tahun });
    };

    prevButton = async () => {
        const tahun = this.state.tahun - 1;
        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, tahun });
        this.setState({ graph, tahun });
    };

    shouldComponentUpdate = (prevProps, prevState) => {
        if (prevState.graph !== this.state.graph) return true;
    };

    excel = () => {
        const url = getExcel(this.props.token, "Laporan", { tahun: this.state.tahun });
        Router.push(url);
    };

    render() {
        const { pelaporan, graph, laporanSelesai } = this.state;
        return (
            <ContentWrapper>
                <div className="content-heading">
                    <span className="font-color-white">
                        Pelaporan Tuntas
                    </span>
                </div>
                <Row>
                    <Col lg="4">{laporanSelesai?.data ? <CaseProgress data={laporanSelesai.data} nextButton={this.nextButton} prevButton={this.prevButton} tahun={this.state.tahun} excel={this.excel} /> : <Loader />}</Col>
                    <Col lg="8">{laporanSelesai?.data?.laporan ? <TableLaporan status noBy listData={laporanSelesai.data.laporan} to="/app/tuntas/detail" linkName="Detail" /> : <Loader />}</Col>
                </Row>
            </ContentWrapper>
        );
    }
}

const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(PelaporanTuntas);