import React, { useEffect, useState } from "react";
import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import { Col, FormGroup } from "reactstrap";
import { useSelector } from "react-redux";
import { getPT } from "@/actions/PT";

function DetailLaporan({ data, noTitle = false, noStatus = false }) {
	const user = useSelector((state) => state.user);

	return (
		<>
			{(!data.user_id.isPrivate || user.peran[0].peran.id === 2020) && (
				<>
					{noTitle ? "" : <p className="lead bb">Identitas Pelapor - {data.user_id.isPublic ? "Umum" : "Internal"}</p>}
					<FormGroup row>
						<Col md="4">Nama Pelapor:</Col>
						<Col md="8">
							<strong>{data.user_id.nama}</strong>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Nomor yang dapat dihubungi:</Col>
						<Col md="8">
							<strong>{data.user_id.no_hp}</strong>
						</Col>
					</FormGroup>
					<FormGroup row>
						<Col md="4">Email:</Col>
						<Col md="8">
							<strong>{data.user_id.email}</strong>
						</Col>
					</FormGroup>

					{data.user_id.isPublic && (
						<>
							<FormGroup row>
								<Col md="4">Alamat:</Col>
								<Col md="8">
									<strong>{data.user_id.alamat}</strong>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Foto Identitas:</Col>
								<Col md="8">
									<img src={`data:${data.user_id.files[0].type};base64, ${Buffer.from(data.user_id.files[0].data).toString("base64")}`} height={200} alt="Foto Identitas" />
								</Col>
							</FormGroup>
						</>
					)}
				</>
			)}
			{noTitle ? "" : <p className="lead bb">Detail Laporan</p>}
			<form className="form-horizontal">
				<FormGroup row>
					<Col md="4">Nomor Laporan:</Col>
					<Col md="8">
						<strong>{data._number}</strong>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Nama Perguruan Tinggi:</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.description}</p>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Dibuat Pada:</Col>
					<Col md="8">
						<strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
					</Col>
				</FormGroup>
				{!noStatus && data.status ? (
					<FormGroup row>
						<Col md="4">Status:</Col>
						<Col md="8">
							<div className="badge badge-info">{data.status}</div>
						</Col>
					</FormGroup>
				) : (
					""
				)}
				<FormGroup row>
					<Col md="4">File Pendukung:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{data.files.map((e, index) => (
										<tr key={`files-${index}`}>
											<td>
												<em className="fa-lg far fa-file-code"></em>
											</td>
											<td>
												<a className="text-muted" href={`data:${e.type};base64, ${Buffer.from(e.data).toString("base64")}`} download={e.name}>
													{e.name}
												</a>
											</td>
										</tr>
									))}
								</tbody>
							</table>
						</Scrollable>
					</Col>
				</FormGroup>
			</form>
		</>
	);
}

export default DetailLaporan;