import { useEffect, useState } from "react";
import Scrollable from "@/components/Common/Scrollable";
import { Card, Row, Col, Table, FormGroup } from "reactstrap";

function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
	return (
		<>
			<Row>
				<Col>
					<p className="lead bb">Detail Laporan</p>
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Laporan:</Col>
							<Col md="8">
								<strong>{dataLaporan._number}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Nama Perguruan Tinggi:</Col>
							<Col md="8">
								<strong>Universitas Satyagama</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Jenis Pelanggaran:</Col>
							<Col md="8">
								<Scrollable height="125px" className="list-group">
									<ul>
										{dataLaporan.pelanggaran.map((e) => (
											<li>{e.pelanggaran}</li>
										))}
									</ul>
								</Scrollable>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Keterangan Laporan:</Col>
							<Col md="8">
								<Scrollable height="100px" className="list-group">
									<p>{dataLaporan.description}</p>
								</Scrollable>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Dibuat Pada:</Col>
							<Col md="8">
								<strong>{moment(dataLaporan.createAt).format("D MMMM YYYY")}</strong>
							</Col>
						</FormGroup>
					</form>
				</Col>
			</Row>
			<Row>
				<Col>
					<p className="lead bb">Penetapan Sanksi</p>
					<Card className="card-default">
						<Table bordered hover responsive>
							<thead>
								<tr>
									<th>No</th>
									<th>Jenis Pelanggaran</th>
									<th>Sanksi</th>
								</tr>
							</thead>
							<tbody>
								{dataPelanggaran
									? dataPelanggaran.map((e, i) => (
											<tr key={e._id}>
												<td>{++i}</td>
												<td>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{e.pelanggaran}</p>
																<p>TMT : {e.tmt_bulan} Bulan</p>
																<p>Level Pelanggaran : {e.label_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
												<td>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{e.sanksi}</p>
																<p>Keterangan : {e.keterangan_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
											</tr>
									  ))
									: ""}
							</tbody>
						</Table>
					</Card>
				</Col>
			</Row>
			<Row>
				<Col>
					<p className="lead bb">Nomor Surat Keputusan Sanksi</p>
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Surat:</Col>
							<Col md="8">
								<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Keterangan:</Col>
							<Col md="8">
								<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Surat Sanksi:</Col>
							<Col md="8">
								<Scrollable height="120px" className="list-group">
									<table className="table table-bordered bg-transparent">
										<tbody>
											{dataUpload
												? dataUpload.files.map((e) => (
														<tr>
															<td>
																<em className="fa-lg far fa-file-code"></em>
															</td>
															<td>
																<a className="text-muted" href={e.preview} download={e.name}>
																	{e.name}
																</a>
															</td>
														</tr>
												  ))
												: ""}
										</tbody>
									</table>
								</Scrollable>
							</Col>
						</FormGroup>
					</form>
				</Col>
			</Row>
		</>
	);
}

export default Ringkasan;