import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import { Row, Col, FormGroup, Input, Card, CardBody, Button, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse } from "reactstrap";
import Link from "next/link";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { getPelaporanPublic } from "@/actions/pelaporan";
import DetailLaporan from "@/components/Public/DetailLaporan";
import { getLogPublic } from "@/actions/log";
import Timeline from "@/components/Main/Timeline";
import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const menu = [
	{
		title: "Home",
		path: "/app",
	},
	{
		title: "Buat Laporan",
		path: "/laporan/new",
	},
	{
		title: "Pemantauan",
		path: "/pemantauan",
	},
];

const pemantauanSchema = Yup.object().shape({
	no_laporan: Yup.string().required("Harap Diisi"),
	no_hp: Yup.number().required("Harap Diisi"),
});
class App extends Component {
	constructor(props) {
		super(props);
		this.state = {
			isOpen: false,
			no_laporan: "",
			no_hp: "",
			msgError: [],
			laporan: null,
			log: null,
		};
	}

	static getInitialProps = ({ pathname }) => ({ pathname });

	toggleCollapse = () => {
		this.setState({
			isOpen: !this.state.isOpen,
		});
	};

	handleLihatPemantaun = async (data) => {
		const { no_hp, no_laporan } = data;
		const log = await getLogPublic({ no_hp, no_laporan });
		this.setState({ laporan: log.data.laporan });
		this.setState({ log: log.data.pemantauan });
	};

	render() {
		const { laporan, log } = this.state;
		return (
			<div>
				<Navbar className="navbar-color" expand="md" dark>
					<NavbarBrand href="/">
					<img className="img-fluid" src="/static/img/Logo-vputih.png" alt="App Logo" /><img className="img-text-vputih" src="/static/img/Logo-text-vputih.png" alt="App Logo" />
					</NavbarBrand>
					<NavbarToggler onClick={this.toggleCollapse} />
					<Collapse isOpen={this.state.isOpen} navbar>
						<Nav className="ml-auto" navbar>
							{menu.map((e) => (
								<NavItem active={e.path === this.props.pathname ? true : false}>
									<Link href={e.path}>
										<NavLink style={{ cursor: "pointer" }}>{e.title}</NavLink>
									</Link>
								</NavItem>
							))}
						</Nav>
					</Collapse>
				</Navbar>
				<ContentWrapper>
					<Row>
						<Col lg={8} className="block-center d-block ">
							<Card className="card-default">
								<CardBody>
									<Formik
										initialValues={{
											no_laporan: "",
											no_hp: "",
										}}
										validationSchema={pemantauanSchema}
										onSubmit={this.handleLihatPemantaun}
									>
										<Form className="form-horizontal">
												<div class="header-1">
    												<h2 class="card-title-1">Pemantauan</h2>
												</div>
											{/* <p className="lead bb">Pemantauan</p> */}
											<FormGroup row>
												<label className="col-md-2 col-form-label">Nomor Laporan</label>
												<div className="col-md-10">
													<Field name="no_laporan">{({ field }) => <Input type="text" {...field} />}</Field>
													<ErrorMessage name="no_laporan" component="div" className="form-text text-danger" />
												</div>
											</FormGroup>
											<FormGroup row>
												<label className="col-md-2 col-form-label">Nomor Aktif</label>
												<div className="col-md-10">
													<Field name="no_hp">{({ field }) => <Input type="tel" {...field} />}</Field>
													<ErrorMessage name="no_hp" component="div" className="form-text text-danger" />
												</div>
											</FormGroup>
											<FormGroup row>
												<div className="posisi-btn-1">
													<Button className="button-lihatpemantauan" color="info" block type="submit">
														<h3 className="text-lihatpemantauan">Lihat Pemantauan</h3>
													</Button>
												</div>
											</FormGroup>
										</Form>
									</Formik>
								</CardBody>
							</Card>
							<Card className="card-default">
								<CardBody>
								<div class="header-1">
    								<h2 class="card-title-1">Rekap Laporan</h2>
								</div>
								<div className="">
									{laporan && log ? (
										<>
											<DetailLaporan data={laporan} />
											<p className="lead bb tengah">Pemantauan</p>
											<Timeline data={log} noFile />{" "}
										</>
									) : (
										<p className="tengah">Tidak Ada Laporan</p>
									)}
								</div>
								</CardBody>
							</Card>
						</Col>
					</Row>
				</ContentWrapper>
			</div>
		);
	}
}

App.Layout = BasePage;

export default App;