import Scrollable from "@/components/Common/Scrollable";
import moment from "moment";
import { Col, FormGroup, Table, Button } from "reactstrap";
import { API_URL } from "@/env";
import React, { Component } from "react";
import { getOneSanksi } from "../../actions/sanksi";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import ComponentBA from "../Sanksi/SuratBA _detail";
import Link from "next/dist/client/link";




class DetailSanksi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			sanksi: {},
		};
	}

	static getInitialProps = async ({ query }) => {
		return { query };
	};

	componentDidMount = async () => {
		const { query, token } = this.props;
		const sanksi = await getOneSanksi(token, query.id);
		this.setState({ sanksi });
	};

	render() {
		const { sanksi } = this.state
		return (
			<>
				<p className="lead bb">Detail Sanksi</p>
				{sanksi.data &&
					<form className="form-horizontal">
						<FormGroup row>
							<Col md="4">Nomor Sanksi:</Col>
							<Col md="8">
								<strong>{sanksi.data.no_sanksi}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
							<Col md="4">Nama Perguruan Tinggi:</Col>
							<Col md="8">
								<strong>{sanksi.data.laporan.pt.nama}</strong>
							</Col>
						</FormGroup>
						<FormGroup row>
					<Col md="4">Keterangan:</Col>
					<Col md="8">
						<Scrollable height="100px" className="list-group">
							<p>{sanksi.data.keterangan}</p>
						</Scrollable>
					</Col>
				</FormGroup>
				<FormGroup row>
					<Col md="4">Tanggal Penetapan Sanksi:</Col>
					<Col md="8">
						<strong>{moment(sanksi.data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
					</Col>
				</FormGroup>
				{
					sanksi.data.tanggal_akhir_keberatan &&
					<FormGroup row>
						<Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
						<Col md="8">
							<strong>{moment(sanksi.data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
						</Col>
					</FormGroup>
				}
				{
					sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding &&
					<FormGroup row>
						<Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
						<Col md="8">
							<strong>{moment(sanksi.data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
						</Col>
					</FormGroup>
				}
				<FormGroup row>
					<Col md="4">Dokumen Sanksi:</Col>
					<Col md="8">
						<Scrollable height="120px" className="list-group">
							<table className="table table-bordered bg-transparent">
								<tbody>
									{sanksi.data.dokumen.map((e) => (
										<tr>
											<td style={{ width: "30px" }}>
												<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>

						<FormGroup row>
							<Col md="4">Dokumen Acara Pleno:</Col>
							<Col md="8">
								<div>
									<ReactToPrint
										trigger={() => {
											return <span>
												<Link
													href={{
														pathname: "/app/sanksi/detail",
														query: { id: this.props.query.id },
													}}>
													<Button color className="btn-labeled-4 mt-0">
														<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
													</Button>
												</Link>
											</span>
										}}
										content={() => this.componentRef}
									/>
									<div style={{ display: "none" }}>
										<ComponentBA ref={el => (this.componentRef = el)} query={this.props.query} />
									</div>
								</div>{/* <BeritaAcara
							query={this.props.query}
						/> */}
							</Col>
						</FormGroup>
						<FormGroup row>
					<Col md={12}>
						<div className="card b">
							<div className="card-body bb">
								<Table responsive>
									<thead>
										<tr>
											<th>Jenis Pelanggaran</th>
											<th>Sanksi</th>
										</tr>
									</thead>
									<tbody>
										{sanksi.data.pelanggaran.map((jp, index) => (
											<tr key={jp._id}>
												<td width={50}>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{jp.pelanggaran}</p>
																<p>TMT : {jp.tmt_bulan} Bulan</p>
																<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
												<td width={50}>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{jp.sanksi}</p>
																<p>Keterangan : {jp.keterangan_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
											</tr>
										))}
									</tbody>
								</Table>
							</div>
						</div>
					</Col>
				</FormGroup>

					</form>
				}

			</>
		)
	}



}



// function DetailSanksi({ data, noTitle = false, query }) {

// 	return (
// 		<>
// 			{noTitle ? "" : <p className="lead bb">Detail Sanksi</p>}
// <form className="form-horizontal">
// 	<FormGroup row>
// 		<Col md="4">Nomor Sanksi:</Col>
// 		<Col md="8">
// 			<strong>{data.no_sanksi}</strong>
// 		</Col>
// 	</FormGroup>
// 	<FormGroup row>
// 		<Col md="4">Nama Perguruan Tinggi:</Col>
// 		<Col md="8">
// 			<strong>{data.laporan.pt.nama}</strong>
// 		</Col>
// 	</FormGroup>
// 	<FormGroup row>
// 		<Col md="4">Keterangan:</Col>
// 		<Col md="8">
// 			<Scrollable height="100px" className="list-group">
// 				<p>{data.keterangan}</p>
// 			</Scrollable>
// 		</Col>
// 	</FormGroup>
// 	<FormGroup row>
// 		<Col md="4">Tanggal Penetapan Sanksi:</Col>
// 		<Col md="8">
// 			<strong>{moment(data.masa_berlaku?.from_date).locale("id").format("D MMMM YYYY")}</strong>
// 		</Col>
// 	</FormGroup>
// 	{
// 		data.tanggal_akhir_keberatan &&
// 		<FormGroup row>
// 			<Col md="4">Tanggal Akhir Pengajuan Keberatan</Col>
// 			<Col md="8">
// 				<strong>{moment(data.tanggal_akhir_keberatan).locale("id").format("D MMMM YYYY")}</strong>
// 			</Col>
// 		</FormGroup>
// 	}
// 	{
// 		data.jawaban?.keberatan?.tanggal_akhir_banding &&
// 		<FormGroup row>
// 			<Col md="4">Tanggal Akhir Pengajuan Banding:</Col>
// 			<Col md="8">
// 				<strong>{moment(data.jawaban?.keberatan?.tanggal_akhir_banding).locale("id").format("D MMMM YYYY")}</strong>
// 			</Col>
// 		</FormGroup>
// 	}
// 	<FormGroup row>
// 		<Col md="4">Dokumen Sanksi:</Col>
// 		<Col md="8">
// 			<Scrollable height="120px" className="list-group">
// 				<table className="table table-bordered bg-transparent">
// 					<tbody>
// 						{data.dokumen.map((e) => (
// 							<tr>
// 								<td style={{ width: "30px" }}>
// 									<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>
// 	<FormGroup row>
// 		<Col md="4">Dokumen Acara Pleno:</Col>
// 		<Col md="8">
// 			<BeritaAcara
// 				query={query}
// 			/>
// 		</Col>
// 	</FormGroup>
// 	<FormGroup row>
// 		<Col md={12}>
// 			<div className="card b">
// 				<div className="card-body bb">
// 					<Table responsive>
// 						<thead>
// 							<tr>
// 								<th>Jenis Pelanggaran</th>
// 								<th>Sanksi</th>
// 							</tr>
// 						</thead>
// 						<tbody>
// 							{data.pelanggaran.map((jp, index) => (
// 								<tr key={jp._id}>
// 									<td width={50}>
// 										<div className="media align-items-center">
// 											<div className="media-body d-flex">
// 												<div>
// 													<p>{jp.pelanggaran}</p>
// 													<p>TMT : {jp.tmt_bulan} Bulan</p>
// 													<p>Jenis Sanksi Administratif : {jp.label_sanksi}</p>
// 												</div>
// 											</div>
// 										</div>
// 									</td>
// 									<td width={50}>
// 										<div className="media align-items-center">
// 											<div className="media-body d-flex">
// 												<div>
// 													<p>{jp.sanksi}</p>
// 													<p>Keterangan : {jp.keterangan_sanksi}</p>
// 												</div>
// 											</div>
// 										</div>
// 									</td>
// 								</tr>
// 							))}
// 						</tbody>
// 					</Table>
// 				</div>
// 			</div>
// 		</Col>
// 	</FormGroup>
// </form>
// 		</>
// 	);
// }

export default DetailSanksi;