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


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

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


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

                    <Button color className="btn-login" onClick={async () => {
                        if (role === 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 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={setmodal}>
                        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.length > 64 ? data.laporan.pt.nama.substring(0, 64) + "..." : data.laporan.pt.nama}</h4>
                                                                <p className="w-105">{data.keterangan}</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </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">Sanksi sudah diberikan 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">Sanksi sudah diberikan 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">Sanksi sudah diberikan jawaban atas permohonan pencabutan sanksi</p>
                                                    )}
                                                    {data.last_step === "Dokumen Perbaikan" && (
                                                        <p className="w-105">Sanksi dalam proses dokumen perbaikan</p>
                                                    )}

                                                </div>
                                                :
                                                <div>
                                                    <div className="badge badge-red">Menunggu konfirmasi Perguruan Tinggi</div>
                                                    <p className="w-105">Perguruan Tinggi belum melakukan konfirmasi terhadap sanksi</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">
                                                        Bypass Proses
                                                    </span>
                                                </Button>
                                            </td>
                                        </tr>
                                    );
                                })
                                : ""}
                        </tbody>
                    </table>
                </Datatable>
            </div>
        </div>
    );
}

export default TableBypass;