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

function DetailLaporan({ data, noTitle = false, noStatus = false, role }) {
	const user = useSelector((state) => state.user);
	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 (
		<>
			{(!data.user?.isPrivate || user?.role?.id === 2020) && (
				<>
					{noTitle ? (
						""
					) : (
						<div className="header-1">
							<h2 className="card-title-1">Identitas Pelapor - {data.user?.isPublic ? "Umum" : "Internal"}</h2>
						</div>
					)}
					{data.user?.nama && (
						<FormGroup row>
							<Col md="4">Nama Pelapor:</Col>
							<Col md="8">
								<strong>{data.user?.nama}</strong>
							</Col>
						</FormGroup>
					)}
					<FormGroup row>
						<Col md="4">Nomor yang dapat dihubungi:</Col>
						<Col md="8">
							<strong>
								{data.user?.no_hp} {data.user?.verified && "(Terverifikasi)"}
							</strong>
						</Col>
					</FormGroup>
					{data.user?.email && (
						<FormGroup row>
							<Col md="4">Email:</Col>
							<Col md="8">
								<strong>{data.user?.email}</strong>
							</Col>
						</FormGroup>
					)}

					{data.user?.isPublic && (
						<>
							{data.user?.alamat && (
								<FormGroup row>
									<Col md="4">Alamat:</Col>
									<Col md="8">
										<strong>{data.user.alamat}</strong>
									</Col>
								</FormGroup>
							)}
							{data.user.foto && (
								<FormGroup row>
									<Col md="4">Foto Kartu Identitas:</Col>
									<Col md="8">
										<img src={data.user?.foto.path} height={200} alt="Foto Identitas" />
									</Col>
								</FormGroup>
							)}
						</>
					)}
					{data.user?.isPrivate && (
						<FormGroup row>
							<Col md="4">Dirahasiakan</Col>
							<Col md="8">
								<strong>Ya</strong>
							</Col>
						</FormGroup>
					)}
				</>
			)}
			{noTitle ? (
				""
			) : (
				<div className="header-1">
					<h2 className="card-title-1">Detail Laporan</h2>
				</div>
			)}
			<form className="form-horizontal">
				<FormGroup row>
					<Col md="4">Tanggal Dibuat Laporan:</Col>
					<Col md="8">
						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Nomor Laporan:</Col>
					<Col md="8">
						<strong>{data.no_laporan}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Nama Perguruan Tinggi yang Dilaporkan:</Col>
					<Col md="8">
						<strong>{data.pt.nama}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Jenis Pelanggaran:</Col>
					<Col md="8">
						<Scrollable height="125px" className="list-group">
							<ul>
								{data.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>{data.keterangan}</p>
						</Scrollable>
					</Col>
				</FormGroup>

				{!noStatus && data.aktif ? (
					<FormGroup row>
						<Col md="4">Status:</Col>
						<Col md="8">
							<div className="badge badge-info">{data.role_data === "dikti" ? "Ditindaklanjuti DIKTI" : "Ditindaklanjuti LLDIKTI"}</div>
						</Col>
					</FormGroup>
				) : (
					<FormGroup row>
						<Col md="4">Status:</Col>
						<Col md="8">
							<div className="badge badge-danger">Ditutup</div>
						</Col>
					</FormGroup>
				)}
				{/* <FormGroup row>
					<Col md="4">Prioritas:</Col>
					<Col md="8">{data.level == 3 ? <div className="badge badge-success">Tinggi</div> : data.level == 2 ? <div className="badge badge-info">Sedang</div> : <div className="badge badge-warning">Rendah</div>}</Col>
				</FormGroup> */}
				<FormGroup row>
					<Col md="4">Dokumen Pendukung:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{data.dokumen.map((e, index) => (
										<tr key={`files-${index}`}>
											<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>
		</>
	);
}

export default DetailLaporan;