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";
import { connect } from "react-redux";
import Swal from "sweetalert2";





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 });
	};
	handleOpenAlert = () => {
		Swal.fire({
			icon: 'error',
			title: 'Oops...',
			html: 'Maaf anda tidak memiliki akses untuk menyelesaikan<p> proses ini.</p>',
			confirmButtonColor: "#3e3a8e",
			confirmButtonText: 'Oke'
		})
	};

	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>
														{this.props.user.role.id === 2024?
															<a className="text-muted" onClick={this.handleOpenAlert} >
																{e.judul}
															</a>
															:
															<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>
									{this.props.user.role.id === 2024 ?
										<Button color className="btn-labeled-4 mt-0" onClick={this.handleOpenAlert}>
											<h5 className="p-0 mt-2"><em className="fas fa-download mr-2" />Print dan Download</h5>
										</Button>
										:
										<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>
				}

			</>
		)
	}



}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(DetailSanksi)