import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import { Col, FormGroup, Table } from "reactstrap";
import { API_URL } from "@/env";
import Swal from "sweetalert2";
import { connect } from "react-redux";

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 (
		<>
			{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>
				{data.masa_berlaku?.from_date && data.masa_berlaku?.from_date === null &&
					<FormGroup row>
						<Col md="4">Tanggal Penetapan Sanksi:</Col>
						<Col md="8">
							<strong>{data.masa_berlaku?.from_date?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 Pengajuan 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 Pengajuan 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="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>
				<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>
			</form>
		</>
	);
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(DetailSanksi);