import Scrollable from "@/components/Common/Scrollable";
import { Card, Row, Col, Table, FormGroup, Label, Button } from "reactstrap";
import moment from "moment";
import 'moment/locale/id'
moment.locale('id')
import ComponentToPrint from "./SuratBA_A";
import ReactToPrint, { PrintContextConsumer } from 'react-to-print';
import React, { Component } from "react";
import { getAutoSave, inputAutoSave } from "@/actions/autosave";



export class Ringkasan extends Component {
	constructor(props) {
		super(props);
		this.state = {


		};
	}
	// function Ringkasan({ dataLaporan, dataPelanggaran, dataUpload }) {
	// 	return (
	componentDidMount = async () => {
		const { query, token } = this.props;
		const { id } = query;
		const getDataSave = await getAutoSave({ token, id, laporan: true });
		const saveData = getDataSave.data?.penetapanSanksi;
		this.setState(saveData)
	}
	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 { dataLaporan, dataPelanggaran, dataUpload } = this.props
		console.log(dataUpload)
		return (
			<>
				<Row>
					<Col>
						<p className="lead bb">Detail Laporan</p>
						<form className="form-horizontal">
							<FormGroup row>
								<Col md="4">Nomor Laporan:</Col>
								<Col md="8">
									<strong>{dataLaporan.no_laporan}</strong>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Nama Perguruan Tinggi:</Col>
								<Col md="8">
									<strong>{dataLaporan.pt.nama}</strong>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Jenis Pelanggaran:</Col>
								<Col md="8">
									<Scrollable height="125px" className="list-group">
										<ul>
											{dataLaporan.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>{dataLaporan.keterangan}</p>
									</Scrollable>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Tanggal Dibuat Laporan:</Col>
								<Col md="8">
									<strong>{moment(dataLaporan.createdAt).format("D MMMM YYYY")}</strong>
								</Col>
							</FormGroup>
						</form>
					</Col>
				</Row>
				<Row>
					<Col>
						<p className="lead bb">Penetapan Sanksi</p>
						<Card className="card-default">
							<Table bordered hover responsive>
								<thead>
									<tr>
										<th>No</th>
										<th>Jenis Pelanggaran</th>
										<th>Sanksi</th>
									</tr>
								</thead>
								<tbody>

									{dataPelanggaran
										? dataPelanggaran.map((e, i) => (
											<tr key={e._id}>
												<td>{++i}</td>
												<td>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{e.pelanggaran}</p>
																<p>TMT : {e.tmt_bulan} Bulan</p>
																<p>Level Pelanggaran : {e.label_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
												<td>
													<div className="media align-items-center">
														<div className="media-body d-flex">
															<div>
																<p>{e.sanksi}</p>
																<p>Keterangan : {e.keterangan_sanksi}</p>
															</div>
														</div>
													</div>
												</td>
											</tr>
										))
										: ""}
								</tbody>
							</Table>
						</Card>
					</Col>
				</Row>
				<Row>
					<Col>
						<p className="lead bb">Nomor Surat Keputusan Sanksi</p>
						<form className="form-horizontal">
							<FormGroup row>
								<Col md="4">Nomor Surat:</Col>
								<Col md="8">
									{dataUpload?.nomorSanksi ? (<strong>{dataUpload.nomorSanksi}</strong>) : (<span className="text-danger text-bold">Belum diisi</span>)}
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Keterangan:</Col>
								<Col md="8">
									{dataUpload?.keterangan ? (<strong>{dataUpload.keterangan}</strong>) : (<span className="text-danger text-bold">Belum diisi</span>)}
								</Col>
							</FormGroup>
							{dataUpload && !dataUpload.tidakPerluTMTCheck ? (
								<FormGroup row>
									<Col md="4">TMT Berlaku:</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.akhirTMT ? (
												<p>
													{moment(dataUpload.awalTMT).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirTMT).locale("id").format("DD MMMM YYYY")}
												</p>
											) : (
												(<span className="text-danger text-bold">Belum diisi</span>)
											)}
										</strong>
									</Col>
								</FormGroup>
							) : (
								""
							)}
							{/* <FormGroup row>
								<Col md="4">Tanggal Penetapan Sanksi:</Col>
								<Col md="8">
									<strong>
										{dataUpload && dataUpload.awalTMT ? (
											<p>
												{moment(dataUpload.awalTMT).locale("id").format("DD MMMM YYYY")} ////////tidak digunakan
											</p>
										) : (
											""
										)}
									</strong>
								</Col>
							</FormGroup> */}
							{dataUpload && !dataUpload.tidakPerluTMTCheck ? (
								<FormGroup row>
									<Col md="4">TMT :</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.akhirTMT ? (
												<p>
													{moment(dataUpload.akhirTMT).diff(dataUpload.awalTMT, 'month')} bulan
												</p>
											) : (
												(<span className="text-danger text-bold">Belum diisi</span>)
											)}
										</strong>
									</Col>
								</FormGroup>
							) : ("")}
							<FormGroup row>
								<Col md="4">Sanksi:</Col>
								<Col md="8">
									<strong>{dataUpload?.listSanksi?.length ? (dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>)) : (<span className="text-danger text-bold">Belum diisi</span>)}		</strong>

								</Col>
							</FormGroup>

							<FormGroup row>
								<Col md="4">Surat Sanksi:</Col>
								<Col md="8">
									<Scrollable height="120px" className="list-group">
										<table className="table table-bordered bg-transparent">
											<tbody>
												{dataUpload?.files?.length ?
													(dataUpload.files.map((e) => (
														<tr>
															<td style={{ width: "30px" }}>
																<em className="fa-lg far fa-file-code"></em>
															</td>
															<td>
																<a className="text-muted" href={e.preview} download={e.name}>
																	{e.name}
																</a>
															</td>
														</tr>
													)))
													: (<span className="text-danger text-bold">Belum diisi</span>)}
											</tbody>
										</table>
									</Scrollable>
								</Col>
							</FormGroup>
							{/* <FormGroup row>
								<Col md="4">Surat Berita Acara:</Col>
								<Col md="8">
						
									<ReactToPrint
										trigger={() => {
											return <span>
												<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>
											</span>
										}}
										content={() => this.componentRef}
									/>
									<div style={{ display: "none" }}>
										<ComponentToPrint ref={el => (this.componentRef = el)} query={this.props.query} dataPelanggaran={this.props.dataPelanggaran} dataSuratBA={this.props.dataSuratBA} />
									</div>
								</Col>
							</FormGroup> */}
							<FormGroup row>
								<Col md="4">Tanggal Terima Surat Sanksi :</Col>
								<Col md="8">
									<strong>
										{dataUpload && dataUpload?.terimaSuratSanksi ? (
											(<p>
												{moment(dataUpload.terimaSuratSanksi).locale("id").format("DD MMMM YYYY")}
											</p>)
										) : (
											(<span className="text-danger text-bold">Belum diisi</span>)
										)}
									</strong>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Dokumen Tanda Terima Surat Sanksi:</Col>
								<Col md="8">
									<Scrollable height="120px" className="list-group">
										<table className="table table-bordered bg-transparent">
											<tbody>
												{dataUpload?.filesTandaTerimaSS?.length
													?( dataUpload.filesTandaTerimaSS.map((e) => (
														<tr>
															<td style={{ width: "30px" }}>
																<em className="fa-lg far fa-file-code"></em>
															</td>
															<td>
																<a className="text-muted" href={e.preview} download={e.name}>
																	{e.name}
																</a>
															</td>
														</tr>
													)))
													: 
													(<span className="text-danger text-bold">Belum diisi</span>)}
											</tbody>
										</table>
									</Scrollable>
								</Col>
							</FormGroup>
							{dataUpload && !dataUpload.tidakPerluTMTCheck && (
								<FormGroup row>
									<Col md="4">Tanggal Akhir Pengajuan Keberatan :</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.tglAkhirKeberatan ? (
												(<p>
													{moment(dataUpload.tglAkhirKeberatan).locale("id").format("DD MMMM YYYY")}
												</p>)
											) : (
												(<span className="text-danger text-bold">Belum diisi</span>)
											)}
										</strong>
									</Col>
								</FormGroup>
							)

							}

						</form>
					</Col>
				</Row>
			</>
		)
	}
}

// 	);
// }

export default Ringkasan;