import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";
import { bypassCabutSanksi } from "../../actions/cabutSanksi";
import { useSelector } from "react-redux";
import { ToastContainer, toast } from "react-toastify";
import Router from "next/router";
import { useState } from "react";
import { Modal, ModalBody, ModalFooter } from "reactstrap";
import { getCsrf } from "../../actions/security";


function TableBypass({ listData, to, linkName }) {

    const token = useSelector((state) => state.token)
    const [modalIsOpen, setModalIsOpen] = useState(false)
    const [seledtedID, setSelectedID] = useState("")
    const setmodal = (id) => {
        setModalIsOpen(true)
        setSelectedID(id)
    }


    return (
        <div className="card b">
            <Modal isOpen={modalIsOpen} >
                <ModalBody>Apakah Anda yakin akan mencabut sanksi pada laporan ini?</ModalBody>
                <ModalFooter>

                    <Button color className="btn-login" onClick={async () => {
                        	const getToken = await getCsrf();
                            const _csrf = getToken.token;
                        await toast.promise(bypassCabutSanksi(token, seledtedID, _csrf), {
                            pending: "Loading",
                            success: "Success",
                            error: "Error",
                        });
                        Router.push(`/app/pencabutan-sanksi/detail?id=${seledtedID}`);
                        setModalIsOpen(false)
                    }}>
                        <span className="font-color-white">Ya</span>
                    </Button>
                    <Button color className="btn-v2" onClick={setModalIsOpen}>
                        Tidak
                    </Button>
                </ModalFooter>
            </Modal>
            <div className="card-body card-over">
                <Datatable options={{ responsive: false, ordering: true }}>
                    <table className="table w-100" data-order='[[3, "desc"]]'>
                        <thead>
                            <tr>
                                <th>Nomor Sanksi</th>
                                <th>Deskripsi Sanksi</th>
                                {/* <th>Created</th> */}
                                <th>Status</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {listData.length
                                ? listData.map((data) => {
                                    return (
                                        <tr key={data._id}>
                                            {/* <td>{data.no_sanksi}</td> */}
                                            <td>
                                                <div className="media align-items-center">
                                                    <div className="media-body d-flex">
                                                        <div>
                                                            <h4>{data.no_sanksi}</h4>
                                                            <p>{moment(data.createdAt).format("DD-MM-YYYY")}</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <div className="table-desc">
                                                    <div className="media align-items-center">
                                                        <div className="media-body d-flex">
                                                            <div>
                                                                {/* <h4 className="m-0">{data.laporan.pt.nama}</h4> */}
                                                                <h4 className="m-0">{data.laporan.pt.nama.length > 64 ? data.laporan.pt.nama.substring(0, 64) + "..." : data.laporan.pt.nama}</h4>
                                                                {/* <p className="w-105">{data.keterangan.length > 150 ? data.keterangan.substring(0, 150) + "..." : data.keterangan}</p> */}
                                                                <p className="w-105">{data.keterangan}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            {/* <td>{moment(data.createdAt).fromNow()}</td> */}
                                            {/* <td>{moment(data.createdAt).format("DD MMMM YYYY")}</td> */}
                                            <td>{data.last_step ?
                                                <div>
                                                    <div className="badge badge-green">{data.last_step}</div>
                                                    {data.last_step === "Permohonan Keberatan" && (
                                                        <p className="w-105">Sanksi dalam proses pengajuan permohonan keberatan</p>
                                                    )}
                                                    {data.last_step === "Jawaban Atas Permohonan Keberatan" && (
                                                        <p className="w-105">PDDIKTI sudah memberikan jawaban atas permohonan keberatan</p>
                                                    )}
                                                    {data.last_step === "Permohonan Banding" && (
                                                        <p className="w-105">Sanksi dalam proses pengajuan permohonan banding</p>
                                                    )}
                                                    {data.last_step === "Jawaban Atas Permohonan Banding" && (
                                                        <p className="w-105">PDDIKTI sudah memberikan jawaban atas permohonan banding</p>
                                                    )}
                                                    {data.last_step === "Permohonan Pencabutan Sanksi" && (
                                                        <p className="w-105">Sanksi dalam proses permohonan pencabutan sanksi</p>
                                                    )}
                                                    {data.last_step === "Jawaban Atas Permohonan Pencabutan Sanksi" && (
                                                        <p className="w-105">PDDIKTI sudah memberikan jawaban atas permohonan pencabutan sanksi</p>
                                                    )}
                                                    {data.last_step === "Dokumen Perbaikan" && (
                                                        <p className="w-105">Proses perbaikan dokumen</p>
                                                    )}

                                                </div>
                                                :
                                                <div>
                                                    <div className="badge badge-red">Belum Diperiksa</div>
                                                    <p className="w-105">Sanksi belum diperiksa</p>
                                                </div>}
                                            </td>
                                            <td
                                                style={{ width: "25%" }}
                                            >
                                                <Link
                                                    href={{
                                                        pathname: to,
                                                        query: { id: data._id },
                                                    }}
                                                >
                                                    <Button className="btn-login float-right" color
                                                        style={{ borderRadius: "7px" }}
                                                    >
                                                        <span className="font-color-white">
                                                            {linkName}
                                                        </span>
                                                    </Button>
                                                </Link>
                                                <Button className="btn-v2 float-right mr-2" color
                                                    style={{ borderRadius: "7px" }}
                                                    onClick={() => { setmodal(data._id) }}
                                                >
                                                    <span className="font-color-black">
                                                        Cabut Sanksi
                                                    </span>
                                                </Button>
                                            </td>
                                        </tr>
                                    );
                                })
                                : ""}
                        </tbody>
                    </table>
                </Datatable>
            </div>
        </div>
    );
}

export default TableBypass;