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

moment.locale("id");

function TableLaporan({ listData }) {

	const sanksiMap = {
		1: { label: "Ringan", className: "badge badge-success" },
		2: { label: "Sedang", className: "badge badge-warning" },
		3: { label: "Berat", className: "badge badge-danger" },
	};
	console.log(listData)
	return (
		<div className="card b">
			<div className="card-body card-over">
				{listData && (
					<Datatable options={{ responsive: false }}>
						<table className="table w-100" data-order='[[3, "asc"]]'>
							<thead>
								<tr>
									<th>No.Laporan</th>
									<th>Deskripsi Laporan</th>
									<th>Status TMT</th>
									<th>Status</th>
									<th>Aksi</th>


								</tr>
							</thead>
							<tbody>
								{listData.map((data) => {
									return (
										<tr key={data._id}>
											{/* <td>{data.no_laporan}</td> */}
											<td>
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<p style={{ display: "none" }}>{data.createdAt}</p>
															<h4>{data.no_laporan}</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.pt.nama.length > 65 ? data.pt.nama.substring(0, 65) + "..." : data.pt.nama}</h4>
																<p className="w-105">{data.keterangan}</p>
															</div>
														</div>
													</div>
												</div>
											</td>
											<td>
												{data.sanksi?.masa_berlaku ? (
													new Date(data.sanksi?.masa_berlaku.to_date).getTime() + 86400000 > Date.now() ? <div className="badge badge-primary">Berlaku</div> : <div className="badge badge-red">Tidak berlaku</div>
												) : ""}
												<p>
													{data.sanksi?.masa_berlaku?.to_date ? (<span className="m-0"> {moment(data.sanksi.masa_berlaku?.from_date).format("DD MMMM YYYY")} - {moment(data.sanksi.masa_berlaku?.to_date).format("DD MMMM YYYY")}</span>) : (<span className="m-0">6 Bulan</span>)}
												</p>
											</td>
											<td>{data.sanksi ? <div className="badge badge-green">Sudah ditetapkan</div> : <div className="badge badge-red">Belum ditetapkan</div>}

												{data?.sanksi?.levelSanksi && (
													<div className={sanksiMap[data.sanksi.levelSanksi]?.className}>
														Sanksi Administratif : {sanksiMap[data.sanksi.levelSanksi]?.label}
													</div>
												)}

											</td>
											<td>
												<div className="ml-auto">
													<Link
														href={{
															pathname: data.sanksi ? "/app/sanksi/detail" : "/app/sanksi/proses",
															query: { id: data.sanksi?._id || data._id },
														}}
													>
														<Button className="btn-login" color style={{ borderRadius: "7px" }}>
															<span className="font-color-white">
																{data.sanksi ? "Detail" : "Proses Sanksi"}
															</span>
														</Button>
													</Link>
												</div>
											</td>
										</tr>
									);
								})}
							</tbody>
						</table>
					</Datatable>
				)}
			</div>
		</div>
	);
}

export default TableLaporan;