import Datatable from "@/components/Tables/Datatable";
import { Button } from "reactstrap";
import Link from "next/link";
import moment from "moment";
import 'moment/min/locales';
moment.locale('id');

function TableLaporan({ listData, to, linkName, status = false, noBy = false }) {
	return (
		<div className="card b ">
			<div className="card-body card-over">
				{listData && (
					<Datatable options={{ responsive: false, ordering: true }}>
						<table className="table w-100" data-order='[[3, "desc"]]'>
							<thead>
								<tr>
									<th>No.Laporan</th>
									<th>No.Sanksi</th>
									<th>Deskripsi Laporan</th>
									{<th>TMT Berlaku</th>}
									{/* {!noBy && <th>Dibuat Oleh</th>} */}
									{/* <th>Created</th> */}
									<th>Aksi</th>
								</tr>
							</thead>
							<tbody>
								{listData.map((data) => {
									return (
										<tr key={data._id}>
											<td>
												{/* <td>{data.no_laporan}</td> */}
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<h4>{data.laporan.no_laporan}</h4>
															<p>{moment(data.createdAt).format("DD-MMMM-YYYY")}</p>
														</div>
													</div>
												</div>
											</td>
											<td>
												{/* <td>{data.no_laporan}</td> */}
												<div className="media align-items-center">
													<div className="media-body d-flex">
														<div>
															<h4>{data.no_sanksi}</h4>
														</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.laporan.keterangan}</p>
															</div>
														</div>
													</div>
												</div>
											</td>


											<td>
												{/* <h4 className="w-105">Sanksi Administratif: {data.pelanggaran.map((e) => e.label_sanksi)}</h4> */}
												{data.sanksi.length ? data.sanksi.map((e) => (<h4 className="w-105">Sanksi Administratif {e.label}</h4>)) : data.pelanggaran.map((e) => (<h4 className="w-105">Sanksi Administratif:  {e.label_sanksi}</h4>))}
												<p className="w-105">{data.sanksi.keterangan}</p>
											</td>
											{!noBy && <td>{data.user.isPrivate ? "" : data.user.nama}</td>}
											<td>
												<div className="ml-auto">
													<Link
														href={{
															pathname: to,
															query: { id: data?._id },
														}}
													>
														<Button className="btn-login" color>
															<span className="font-color-white">
																{linkName}
															</span>
														</Button>
													</Link>
												</div>
											</td>
										</tr>
									);
								})}
							</tbody>
						</table>
					</Datatable>
				)}
			</div>
		</div>
	);
}

export default TableLaporan;