import moment from "moment";
import { Button, Table } from "reactstrap";
import Link from "next/link";

function TableSanksi({ listData, to, linkName, toKeberatan, toJwbBanding, toJwbKeberatan, toPerbaikan, toJwbBanding2, toCabutSanksi, toJwbCabutSanksi }) {
	return (
		<div className="card b">
			<div className="card-body card-over">
				<Table className="table w-100">
					<thead>
						<tr>
							<th>Nomor Sanksi</th>
							<th>Status</th>
						</tr>
					</thead>
					<tbody>
						{listData.map((data) => {
							return (
								<tr key={data._id}>
									<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>{data.is_pengajuan_keberatan === true || data.is_pengajuan_keberatan === false || 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">PDDIKTI sudah memberikan jawaban atas permohonan keberatan</p>
											)}
											{data.last_step === "Jawaban Atas Permohonan Banding" && (
												<p className="w-105">PDDIKTI sudah memberikan jawaban atas permohonan banding</p>
											)}
											{data.last_step === "Permohonan Banding" && (
												<p className="w-105">Sanksi dalam proses pengajuan 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>
										{data.last_step === "Permohonan Keberatan" && (

											<Link href={{ pathname: toKeberatan, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step === "Jawaban Atas Permohonan Keberatan" && (

											<Link href={{ pathname: toJwbKeberatan, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step === "Jawaban Atas Permohonan Banding" && (

											<Link href={{ pathname: toJwbBanding, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step === "Permohonan Banding" && (

											<Link href={{ pathname: toJwbBanding2, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step === "Permohonan Pencabutan Sanksi" && (

											<Link href={{ pathname: toCabutSanksi, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step === "Jawaban Atas Permohonan Pencabutan Sanksi" && (

											<Link href={{ pathname: toJwbCabutSanksi, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}


										{data.last_step === "Dokumen Perbaikan" && (

											<Link href={{ pathname: toPerbaikan, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>

										)}
										{data.last_step ? (

											""

										) : (
											<Link href={{ pathname: to, query: { id: data._id } }}>
												<Button className="btn-login" color >
													<span className="font-color-white">
														{linkName}
													</span>
												</Button>
											</Link>
										)}
									</td>

								</tr>
							);
						})}
					</tbody>
				</Table>
			</div>
		</div>
	);
}

export default TableSanksi;