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";
import swal from "sweetalert2";


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, { tuntas: true });
        const graph = await getGraph(this.props.token, { evaluasi: true, listJadwal: true, aktif: false });
        this.setState({ pelaporan, graph, laporanSelesai });
        console.log(this.state.pelaporan)
    };

    nextButton = async () => {
        const tahun = this.state.tahun + 1;
        const { token } = this.props;
        let laporanSelesai = await getlaporanselesai(token);
        laporanSelesai = {
            ...laporanSelesai, data: {
                ...laporanSelesai.data, laporan: [...laporanSelesai.data.laporan, ...laporanSelesai.data.sanksi], sanksi: null
            }
        }
        this.setState({ laporanSelesai, tahun });
    };

    prevButton = async () => {
        const tahun = this.state.tahun - 1;
        const { token } = this.props;
        let laporanSelesai = await getlaporanselesai(token);
        laporanSelesai = {
            ...laporanSelesai, data: {
                ...laporanSelesai.data, laporan: [...laporanSelesai.data.laporan, ...laporanSelesai.data.sanksi], sanksi: null
            }
        }
        this.setState({ laporanSelesai, 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);
    };
    excelMenu = () => {
        if (this.props?.user?.role.id === 2024) {
            swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                confirmButtonColor: "#3e3a8e",
                confirmButtonText: 'Oke'
            })
        } else {
            const url = getExcel(this.props.token, "Laporan", {
                tahun: this.state.tahun,
                pelaporan: true,
            });
            if (this.state.laporanSelesai.data.jumlah_ditutup && this.state.laporanSelesai.data.jumlah_selesai) {
                Router.push(url);
            } else {
                swal.fire({
                    title: "Data Kosong",
                    icon: "error",
                    confirmButtonColor: "#3e3a8e",
                });
            }
        }
    };
    excelSemua = () => {
        if (this.props?.user?.role.id === 2024) {
            swal.fire({
                icon: 'error',
                title: 'Oops...',
                html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
                confirmButtonColor: "#3e3a8e",
                confirmButtonText: 'Oke'
            })
        } else {
            const url = getExcel(this.props.token, "Laporan", {
                tahun: this.state.tahun,
                pelaporan: true,
                penjadwalan: true,
                pemeriksaan: true,
                sanksi: true,

            });
            if (this.state.laporanSelesai.data.jumlah_ditutup && this.state.laporanSelesai.data.jumlah_selesai) {
                Router.push(url);
            } else {
                swal.fire({
                    title: "Data Kosong",
                    icon: "error",
                    confirmButtonColor: "#3e3a8e",
                });
            }
        }
    };

    render() {
        const { pelaporan, graph, laporanSelesai } = this.state;
        console.log(pelaporan)
        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} excelMenu={this.excelMenu} excelSemua={this.excelSemua} /> : <Loader />}</Col>
                    <Col lg="8">{laporanSelesai?.data?.laporan ? <TableLaporan status noBy listData={pelaporan.data} to="/app/tuntas/detail" linkName="Detail" /> : <Loader />}</Col>
                </Row>
            </ContentWrapper>
        );
    }
}

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