import React, { Component } from "react";
import { Card, Table } from "reactstrap";
import { getPelanggaran } from "@/actions/pelanggaran";
import { connect } from "react-redux";
import Button from "reactstrap/lib/Button";
import { getOneLaporan, updateLaporan } from "@/actions/pelaporan";
import Router from "next/router";
import { ToastContainer, toast } from "react-toastify";
import { getAutoSave } from "@/actions/autosave";
import Datatable from "@/components/Tables/Datatable";




export class TablePenetapanSanksi extends Component {
	checkedData = [];

	constructor(props) {
		super(props);
		this.state = {
			// pelanggaran: null,
			checkedData: [],
			labelSanksi: [],
			btnDelegasi: false,
		};
		this.onHandleChange = this.onHandleChange.bind(this)
	}

	componentDidMount = async () => {
		const { token, query } = this.props;
		const { id } = query;
		const pelanggaran = await getPelanggaran(token);
		const getDataSave = await getAutoSave({ id, laporan: true });
		const autoSaveDataPelanggaran = getDataSave.data?.PenetapanSanksi?.dataPelanggaran;
		this.setState({ pelanggaran, checkedData: autoSaveDataPelanggaran ? autoSaveDataPelanggaran.data.map(e => e._id) : [] });
		this.checkedData = this.state.checkedData
		this.setState({ labelSanksi: autoSaveDataPelanggaran ? autoSaveDataPelanggaran?.data?.map(e => ({ value: e._id, labelSanksi: e.label_sanksi })) : [] })
	};

	onHandleChange = (evt) => {
		const checked = evt.target.checked;
		const item = evt.target.value;
		if (checked) this.state.checkedData.push(evt.target.value);
		// else this.setState((prevState) => ({ ...prevState, checkedData: prevState.checkedData.filter((e) => e != item) }));
		// else this.setState({ checkedData: this.state.checkedData.filter((e) => e != item) });
		else this.state.checkedData = this.state.checkedData.filter((e) => e != item)
		this.props.setCheckedData(this.state.checkedData);
	};

	setLabelSanksi = (evt, label_sanksi) => {
		const checked = evt.target.checked;
		const item = evt.target.value;
		if (checked) this.state.labelSanksi.push({ value: item, labelSanksi: label_sanksi });
		else this.state.labelSanksi = this.state.labelSanksi.filter((e) => e.value != item);
	}

	ondelegasi = () => {
		this.props.handleDelegasi(this.state)
	}

	render() {
		const { pelanggaran, labelSanksi, checkedData } = this.state;
		return (
			<div className="card b ">
				<div className="card-body card-over">
					{pelanggaran && <Datatable options={{
						responsive: false, ordering: true,
						paging: false,
						// searching:false,
						ordering: false,
						// info: false,
					}}>
						<table className="table w-100" >
							<thead>
								<tr>
									<th>No</th>
									<th>Jenis Pelanggaran</th>
									<th>Sanksi</th>
									<th></th>
								</tr>
							</thead>
							<tbody>
								{pelanggaran?.data?.map((jp, index) =>
									<tr key={jp._id}>
										<td>
											<label>{index + 1}</label>
										</td>
										<td>
											<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>
											<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>
										<td>
											<div className="checkbox c-checkbox">
												<label>
													<input type="checkbox" checked={checkedData.find(id => id === jp._id)} value={jp._id} onChange={(evt) => {
														this.onHandleChange(evt)
														this.setLabelSanksi(evt, jp.label_sanksi)
														this.props.handleAutoSave()
													}} />
													<span className="fa fa-check"></span>
												</label>
											</div>
										</td>
									</tr>
								)
								}
							</tbody>

						</table>


					</Datatable>

					}
					{/* {this.props.user?.role.id === 2020 ? (
						labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
							<Button className="btn-login float-right" color onClick={this.ondelegasi} >
								<span className="font-color-white">
									Delegasi ke LLDIKTI
								</span>
							</Button>
						) : ("")
					) : ("")
					} */}
					<div className="float-right m-2 ">
						{this.props.user?.role.id === 2020 ? (
							labelSanksi.length && labelSanksi.filter((e) => e.labelSanksi === "Ringan" || e.labelSanksi === "Sedang").length === labelSanksi.length ? (
								<Button className="btn-login float-right" color onClick={this.ondelegasi} >
									<span className="font-color-white">
										Delegasi ke LLDIKTI
									</span>
								</Button>
							) : ("")
						) : ("")
						}

					</div>


				</div>
			</div>
		);
	}
}

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