import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import 'moment/min/locales';
moment.locale('id');
import { CardBody, Col, FormGroup, Table, Card } from "reactstrap";
import { API_URL } from "@/env";
import Swal from "sweetalert2";

function DetailSanksi({ data, noTitle = false, 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 (
		<Card className="card-default">
			<CardBody>
				{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
				<form className="form-horizontal">
					<FormGroup row>
						<Col md="4">Nomor Sanksi:</Col>
						<Col md="8">
							<strong>{data.no_sanksi}</strong>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Nama Perguruan Tinggi:</Col>
						<Col md="8">
							<strong>{data.laporan.pt.nama}</strong>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Keterangan:</Col>
						<Col md="8">
							<Scrollable height="100px" className="list-group">
								<p>{data.keterangan}</p>
							</Scrollable>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Tanggal Penetapan Sanksi:</Col>
						<Col md="8">
							<strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
						</Col>
					</FormGroup>
					{
						data.tanggal_akhir_keberatan &&
						<FormGroup row>
							<Col md="4">Tanggal Akhir keberatan:</Col>
							<Col md="8">
								<strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
							</Col>
						</FormGroup>
					}
					{
						data.jawaban?.keberatan?.tanggal_akhir_banding &&
						<FormGroup row>
							<Col md="4">Tanggal Akhir Banding:</Col>
							<Col md="8">
								<strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
							</Col>
						</FormGroup>
					}
					<FormGroup row>
						<Col md={12}>
							<div className="card b">
								<div className="card-body bb">
									<Table responsive>
										<thead>
											<tr>
												<th>Jenis Pelanggaran</th>
												<th>Sanksi</th>
											</tr>
										</thead>
										<tbody>
											{data.pelanggaran.map((jp, index) => (
												<tr key={jp._id}>
													<td width={50}>
														<div className="media align-items-center">
															<div className="media-body d-flex">
																<div>
																	<p>{jp.pelanggaran}</p>
																	<p>TMT : {jp.tmt_bulan} Bulan</p>
																	<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
																</div>
															</div>
														</div>
													</td>
													<td width={50}>
														<div className="media align-items-center">
															<div className="media-body d-flex">
																<div>
																	<p>{jp.sanksi}</p>
																	<p>Keterangan : {jp.keterangan_sanksi}</p>
																</div>
															</div>
														</div>
													</td>
												</tr>
											))}
										</tbody>
									</Table>
								</div>
							</div>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Nomor Surat:</Col>
						<Col md="8">
							<strong>{data.no_sanksi}</strong>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">TMT Berlaku:</Col>
						<Col md="8">
							{/* <strong>{moment(data.masa_berlaku.from_date).format("D MMMM YYYY")} - {moment(data.masa_berlaku.to_date).format("D MMMM YYYY")} </strong> */}
							{data.masa_berlaku?.to_date ? (<strong>{moment(data.masa_berlaku?.from_date).format("DD-MMMM-YYYY")} - {moment(data.masa_berlaku?.to_date).format("DD-MMMM-YYYY")}</strong>) : (<strong className="m-0">6 Bulan</strong>)}

						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Sanksi:</Col>
						<Col md="8">
							{/* <strong>{data.pelanggaran.map((e) => e.sanksi)}</strong> */}
							{data?.pelanggaran && data.pelanggaran.map((e) => <li><strong>{e.sanksi}</strong> - {e.keterangan_sanksi}</li>)}

						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Dokumen Sanksi:</Col>
						<Col md="8">
							<Scrollable height="120px" className="list-group">
								<table className="table table-bordered bg-transparent">
									<tbody>
										{data.dokumen.map((e) => (
											<tr>
												<td style={{ width: "30px" }}>
													<em className="fa-lg far fa-file-code"></em>
												</td>
												<td>
													{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>
										))}
									</tbody>
								</table>
							</Scrollable>
						</Col>
					</FormGroup>
				</form>
			</CardBody>
		</Card>
	);
}

export default DetailSanksi;