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

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

	componentDidMount = async () => {
		this.setState({ selectedOption: { value: "ditindaklanjuti", label: "Ditindaklanjuti Dikti Ristek", className: "State-ACT" } });
		// const tes = await addStatus({ number, ptId }, { status: data.status || "ditindaklanjuti" });
	};

	handleChangeSelect = async (selectedOption) => {
		const { ptId, number } = this.props.query;
		this.props.handleChangeSelect(selectedOption);
		this.setState({ selectedOption });
		const tes = await addStatus({ number, ptId }, { status: selectedOption.value });
	};

	render() {
		const { data } = this.props;
		console.log(data);
		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 ke lldikti", 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>{data.pelanggaran ? data.pelanggaran.map((e) => <li>{e.pelanggaran}</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>
												{data.files
													? data.files.map((e) => (
															<tr>
																<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>
								</td>
							</tr>
						</tbody>
					</table>
				</CardBody>
			</Card>
		);
	}
}

export default DetailLaporan;