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

function DetailLaporan({ data, noTitle = false, noStatus = false }) {
    const user = useSelector((state) => state.user);
    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">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>
                <FormGroup row>
                    <Col md="4">Dibuat Pada:</Col>
                    <Col md="8">
                        <strong>{moment(data.createdAt).format("D MMMM YYYY")}</strong>
                    </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">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>
                                                <em className="fa-lg far fa-file-code"></em>
                                            </td>
                                            <td>
                                                <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;