import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { getLog } from "@/actions/log";
import { Row, Col, Card, CardBody, Button } from "reactstrap";
import Timeline from "@/components/Main/Timeline";
import { getOnePT } from "@/actions/PT";
import { connect } from "react-redux";
import { getOneLaporan, getPelaporan } from "../../../actions/pelaporan";
import DetailLaporan from "@/components/Main/DetailLaporan";
import Link from "next/link";
import Loader from "@/components/Common/Loader";
import DetailPT from "@/components/Main/DetailPT";
import moment from "moment";
import Datatable from "@/components/Tables/Datatable";
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>;

class Pemantauan extends Component {
	constructor(props) {
		super(props);
		this.state = {
			log: {},
			detailLaporanPt: {},
			pelaporan: {},
			pt: {},
		};
	}

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

	componentDidMount = async () => {
		const { query, token } = this.props;
		const ptId = query.ptId;
		const pelaporan = await getPelaporan(token, { pt_id: ptId, all: true, aktif: true });
		const pt = await getOnePT(token, ptId);
		this.setState({ pelaporan, pt });

	};

	handleLihatPemantaun = async (e, id_laporan) => {
		const { token } = this.props;
		const log = await getLog(token, id_laporan);
		const detailLaporanPt = await getOneLaporan(token, id_laporan, { all: true, aktif: true });
		this.setState({ detailLaporanPt, log });
	};

	render() {
		const { detailLaporanPt, log, pt, pelaporan } = this.state;
		return (
			<ContentWrapper unwrap>
				<div className="p-3">
					<div className="content-heading">
						<div className="font-color-white">Pemantauan {pt?.data && pt.data.nama}</div>
						<div className="ml-auto">
							<Link href="/app/pemantauan">
								<Button className="color-3e3a8e" color>
									<span className="font-color-white">&lt; Kembali</span>
								</Button>
							</Link>
						</div>
					</div>
					<Row>
						<Col xl={9}>
							<div className="card b">
								<div className="card-body">
									{pelaporan.data?.length ? (
										<Datatable options={{ responsive: false }}>
											<table className="table w-100" data-order='[[0, "desc"]]'>
												<thead>
													<tr>
														<th>Tanggal</th>
														<th>No.Laporan</th>
														<th>Deskripsi Laporan</th>
														<th>Pelapor</th>
														<th>Aksi</th>
													</tr>
												</thead>
												<tbody>
													{pelaporan.data.map((data) => {
														return (
															<tr key={data._id}>

																<td>
																	<p style={{ display: "none" }}>{data.createdAt}</p>
																	{moment(data.createdAt).format("DD/MM/YYYY")}</td>
																<td>{data.no_laporan}</td>

																<td className="text-nowrap">
																	<div className="media align-items-center">
																		<div className="media-body d-flex">
																			<div>
																				<p>{data.keterangan.length > 35 ? data.keterangan.substring(0, 35) + "..." : data.keterangan}</p>
																			</div>
																		</div>
																	</div>
																</td>

																<td>
																	{data.user?.isPrivate ? "" : data.user?.nama} - {data.role_asal}
																</td>

																<td>
																	<div>
																		<Button color className="color-3e3a8e" onClick={(e) => this.handleLihatPemantaun(e, data._id)}>
																			<span className="font-color-white">Detail</span>
																		</Button>
																	</div>
																</td>
															</tr>
														);
													})}
												</tbody>
											</table>
										</Datatable>
									) : pelaporan.data ? (
										"Pelaporan tidak ada"
									) : (
										<Loader />
									)}
								</div>
							</div>
						</Col>
						<Col xl={3}>{pt?.data ? <DetailPT data={pt.data} /> : <Loader />}</Col>
					</Row>
					<Row>
						<Col xl="12">
							{detailLaporanPt.data ? (
								<Card className="card-default">
									<CardBody>
										<Row>
											<Col lg={12}>{<DetailLaporan data={detailLaporanPt.data} />}</Col>
										</Row>
									</CardBody>
								</Card>
							) : (
								<div></div>
							)}
						</Col>
					</Row>
					<Row>
						{log.data && (
							<Col xl={"12"}>
								<Timeline data={log.data} />
							</Col>
						)}
					</Row>
				</div>
			</ContentWrapper>
		);
	}
}
const mapStateToProps = (state) => ({ user: state.user, token: state.token });
export default connect(mapStateToProps)(Pemantauan);