import Datatable from "@/components/Tables/Datatable";
import moment from "moment";
import 'moment/locale/id';
import Swal from "sweetalert2";
moment.locale('id');

function TableRiwayat({ data, perbaikan, role }) {
	const handleOpenAlert = () => {
		Swal.fire({
			icon: 'error',
			title: 'Oops...',
			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
			confirmButtonColor: "#3e3a8e",
			confirmButtonText: 'Oke'
		})
	};
	return (
		// <Datatable options={{ responsive: true }}>
		<div className="card-over">
			<table className="table table-striped my-4 w-100">
				<thead>
					<tr>
						<th>Tanggal</th>
						<th>Keterangan</th>
						<th>Nomor Surat Sanksi</th>
						<th>Dokumen Surat Sanksi</th>
						<th>Dokumen Perbaikan</th>
					</tr>
				</thead>
				<tbody>{data.map((e) =>
					<tr>
						<td>{moment(e.createdAt).format("D MMMM YYYY")}</td>
						<td>{e.keterangan}</td>
						<td>{e.no_sanksi}</td>
						<td>
							{e.dokumen.map((e, index) => (
								<>
									<em key="index" className="fa-lg far fa-file-code"></em>
									<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
										{e.judul}
									</a>
									<br />
								</>
							))}
						</td>
						{perbaikan.length
							? perbaikan.map((value) => (
								<tr>
									<td>
										{value.dokumen.map((e) => (
											<>
												<em className="fa-lg far fa-file-code"></em>
												{role === 2024 ?
													<a className="text-muted" onClick={handleOpenAlert}>
														{e.judul}
													</a>
													:
													<a className="text-muted" href={e.path} target="_blank" download={e.judul}>
														{e.judul}
													</a>
												}
											</>
										))}
									</td>
								</tr>
							))
							: ""}
					</tr>)}
				</tbody>
			</table>
		</div>
		// </Datatable>
	);
}

export default TableRiwayat;