import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";

function TableBypass({ listData, to, linkName }) {
    return (
        <div className="card b">
            <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.is_pengajuan_keberatan === true || data.is_pengajuan_keberatan === false ?
                                                <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" }}
                                                    >
                                                        <span className="font-color-black">
                                                            Pencabutan Sanksi
                                                        </span>
                                                    </Button>
                                            </td>
                                        </tr>
                                    );
                                })
                                : ""}
                        </tbody>
                    </table>
                </Datatable>
            </div>
        </div>
    );
}

export default TableBypass;