import React, { Component } from "react";
import Select from "react-select";
import Scrollable from "@/components/Common/Scrollable";
import { Card, CardBody, CardHeader, CardTitle } from "reactstrap";

const selectInstanceId = 1;
export class DetailLaporan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			selectedOption: null,
		};
	}

	handleChangeSelect = (selectedOption) => {
		this.props.handleChangeSelect(selectedOption);
		this.setState({ selectedOption });
	};

	render() {
		const { data } = this.props;
		return (
			<Card className="card b">
				<CardHeader>
					<CardTitle tag="h4">Detail Laporan</CardTitle>
				</CardHeader>
				<CardBody>
					<table className="table">
						<tbody>
							<tr>
								<td>
									<strong>Status</strong>
								</td>
								<td>
									<Select
										instanceId={selectInstanceId + 1}
										value={this.state.selectedOption}
										onChange={this.handleChangeSelect}
										options={[
											{ value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" },
											{ value: "delegasi", label: "Delegasi ke LLDIKTI", className: "State-ACT" },
											{ value: "ditutup", label: "Ditutup", className: "State-ACT" },
										]}
										required
									/>
								</td>
							</tr>
							<tr>
								<td>
									<strong>Nomor Laporan</strong>
								</td>
								<td>{data._number}</td>
							</tr>
							<tr>
								<td>
									<strong>Perguruan Tinggi</strong>
								</td>
								<td>Universitas Satyagama</td>
							</tr>
							<tr>
								<td>
									<strong>Jenis Pelanggaran</strong>
								</td>
								<td>
									<Scrollable height="75px" className="list-group">
										<ul>
											<li>Lorem ipsum dolor sit amet.</li>
											<li>Lorem, ipsum dolor.</li>
											<li>Lorem ipsum dolor sit.</li>
										</ul>
									</Scrollable>
								</td>
							</tr>
							<tr>
								<td>
									<strong>Keterangan Laporan</strong>
								</td>
								<td>
									<Scrollable height="100px" className="list-group">
										<p>{data.description}</p>
									</Scrollable>
								</td>
							</tr>
							<tr>
								<td>
									<strong>File Pendukung</strong>
								</td>
								<td>
									<Scrollable height="120px" className="list-group">
										<table className="table table-bordered bg-transparent">
											<tbody>
												<tr>
													<td>
														<em className="fa-lg far fa-file-code"></em>
													</td>
													<td>
														<a className="text-muted" href="">
															database.controller.js
														</a>
													</td>
												</tr>
											</tbody>
										</table>
									</Scrollable>
								</td>
							</tr>
						</tbody>
					</table>
				</CardBody>
			</Card>
		);
	}
}

export default DetailLaporan;