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

function TableLaporan({ listData, to, linkName, status = false }) {
	const data = listData;
	return (
		<div className="card b">
			<div className="card-body">
				<Datatable options={{ responsive: true }}>
					<table className="table w-100">
						<thead>
							<tr>
								<th>#ID</th>
								<th>Deskripsi Laporan</th>
								{status ? <th>Status</th> : ""}
								<th>Created</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							{Array.isArray(listData) ? (
								listData.length ? (
									listData.map((data) => {
										if (data.pelaporan) {
											return (
												<tr key={data.pelaporan._id}>
													<td>{data.pelaporan._number}</td>
													<td className="text-nowrap">
														<div className="media align-items-center">
															<div className="media-body d-flex">
																<div>
																	<h4 className="m-0">Universitas Satyagama</h4>
																	<p>{data.pelaporan.description}</p>
																</div>
															</div>
														</div>
													</td>
													{status ? <td>{data.pelaporan.status}</td> : ""}
													<td>{moment(data.pelaporan.createdAt).fromNow()}</td>
													<td>
														<div className="ml-auto">
															<Link
																href={{
																	pathname: to,
																	query: { ptId: data.pelaporan.pt_id, number: data.pelaporan._number },
																}}
															>
																<Button color="primary" size="sm">
																	{linkName}
																</Button>
															</Link>
														</div>
													</td>
												</tr>
											);
										} else {
											return (
												<tr key={data._id}>
													<td>{data._number}</td>
													<td className="text-nowrap">
														<div className="media align-items-center">
															<div className="media-body d-flex">
																<div>
																	<h4 className="m-0">Universitas Satyagama</h4>
																	<p>{data.description}</p>
																</div>
															</div>
														</div>
													</td>
													{status ? <td>{data.status}</td> : ""}
													<td>{moment(data.createdAt).fromNow()}</td>
													<td>
														<div className="ml-auto">
															<Link
																href={{
																	pathname: to,
																	query: { ptId: data.pt_id, number: data._number },
																}}
															>
																<Button color="primary" size="sm">
																	{linkName}
																</Button>
															</Link>
														</div>
													</td>
												</tr>
											);
										}
									})
								) : (
									""
								)
							) : listData ? (
								<tr key={listData._id}>
									<td>{listData._number}</td>
									<td className="text-nowrap">
										<div className="media align-items-center">
											<div className="media-body d-flex">
												<div>
													<h4 className="m-0">Universitas Satyagama</h4>
													<p>{listData.description}</p>
												</div>
											</div>
										</div>
									</td>
									{status ? <td>{listData.status}</td> : ""}
									<td>{moment(listData.createdAt).fromNow()}</td>
									<td>
										<div className="ml-auto">
											<Link
												href={{
													pathname: to,
													query: { ptId: listData.pt_id, number: listData._number },
												}}
											>
												<Button color="primary" size="sm">
													{linkName}
												</Button>
											</Link>
										</div>
									</td>
								</tr>
							) : (
								""
							)}
						</tbody>
					</table>
				</Datatable>
			</div>
		</div>
	);
}

export default TableLaporan;