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 });
		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)
		this.setState({ detailLaporanPt, log });
	}

	render() {
		const { detailLaporanPt, log, pt, pelaporan } = this.state;
		console.log(pelaporan)
		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="btn btn-sm btn-secondary text-sm">&lt; back</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">
												<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>{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}</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);