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)
		}

	render() {
		const { dataLaporan, dataPelanggaran, dataUpload } = this.props
		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">Dibuat Pada:</Col>
								<Col md="8">
									<strong>{moment(dataLaporan.createAt).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">
									<strong>{dataUpload ? dataUpload.nomorSanksi : ""}</strong>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Keterangan:</Col>
								<Col md="8">
									<strong>{dataUpload ? dataUpload.keterangan : ""}</strong>
								</Col>
							</FormGroup>
							{dataUpload && !dataUpload.tmtCheck ? (
								<FormGroup row>
									<Col md="4">TMT Berlaku:</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.akhirsanksi ? (
												<p>
													{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")} - {moment(dataUpload.akhirsanksi).locale("id").format("DD MMMM YYYY")}
												</p>
											) : (
												""
											)}
										</strong>
									</Col>
								</FormGroup>
							) : (
								<FormGroup row>
									<Col md="4">Tanggal Penetapan Sanksi:</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.awalsanksi ? (
												<p>
													{moment(dataUpload.awalsanksi).locale("id").format("DD MMMM YYYY")}
												</p>
											) : (
												""
											)}
										</strong>
									</Col>
								</FormGroup>
							)}
							{dataUpload && !dataUpload.tmtCheck ? (
								<FormGroup row>
									<Col md="4">TMT :</Col>
									<Col md="8">
										<strong>
											{dataUpload && dataUpload.akhirsanksi ? (
												<p>
													{moment(dataUpload.akhirsanksi).diff(dataUpload.awalsanksi, 'month')} bulan
												</p>
											) : (
												""
											)}
										</strong>
									</Col>
								</FormGroup>
							) : ("")}
							<FormGroup row>
								<Col md="4">Sanksi:</Col>
								<Col md="8">
									<strong>{dataUpload && dataUpload.listSanksi?.length ? dataUpload.listSanksi.map((e, index) => <p>{index + 1 + " " + e.value}</p>) : ""}</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
													? dataUpload.files.map((e) => (
														<tr>
															<td>
																<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>
													))
													: ""}
											</tbody>
										</table>
									</Scrollable>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Surat Berita Acara:</Col>
								<Col md="8">
									{/* <Scrollable height="120px" className="list-group">
									<table className="table table-bordered bg-transparent">
										<tbody>
											{dataUpload
												? dataUpload.filesBeritaAcara.map((e) => (
													<tr>
														<td>
															<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>
												))
												: ""}
										</tbody>
									</table>
								</Scrollable> */}
										<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>
										) : (
											""
										)}
									</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
													? dataUpload.filesTandaTerimaSS.map((e) => (
														<tr>
															<td>
																<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>
													))
													: ""}
											</tbody>
										</table>
									</Scrollable>
								</Col>
							</FormGroup>
							<FormGroup row>
								<Col md="4">Akhir Permohonan Keberatan Sanksi :</Col>
								<Col md="8">
									<strong>
										{dataUpload && dataUpload.tglAkhirKeberatan ? (
											<p>
												{moment(dataUpload.tglAkhirKeberatan).locale("id").format("DD MMMM YYYY")}
											</p>
										) : (
											""
										)}
									</strong>
								</Col>
							</FormGroup>
						</form>
					</Col>
				</Row>
			</>
		)
	}
}

// 	);
// }

export default Ringkasan;