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";
import { ToastContainer, toast } from "react-toastify";
// import Swal from '@/components/Common/Swal';
import "react-toastify/dist/ReactToastify.css";
import swal from "sweetalert2";

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().notRequired("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 toastid = toast.loading("Please wait...");
    const log = await getLogPublic({ no_hp, no_laporan });
    if (log.data) {
      this.setState({ laporan: log.data.laporan, log: log.data.pemantauan });
      // swal.fire("Data ditemukan", "", "success");
      swal.fire({
        title: "Data ditemukan",
        icon: "success",
        confirmButtonColor: "#3E3A8E",
      });
    } else {
      this.setState({ laporan: null, log: null });
      // swal.fire("Data tidak ditemukan", " ", "error");
      swal.fire({
        title: "Data tidak ditemukan",
        icon: "error",
        confirmButtonColor: "#3E3A8E",
      });
    }
  };

  render() {
    const { laporan, log } = this.state;
    return (
      <div>
        <ToastContainer />
        <Navbar className="navbar-color" expand="md" dark>
          <NavbarBrand href="/">
            <img
              className="width-133"
              src="/static/img/Logo-Sidali.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 btn-radius">
                          <Button
                            className="button-lihatpemantauan btn-login"
                            color
                            block
                            type="submit"
                          >
                            <h3 className="text-lihatpemantauan font-color-white">
                              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;