import React, { Component } from "react";
import BasePage from "@/components/Layout/BasePage";
import { Row, Col, Navbar, NavItem, NavLink, NavbarBrand, NavbarToggler, Nav, Collapse, Jumbotron, Button } from "reactstrap";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import Link from "next/link";
import Login from "@/components/Main/Login";
import { connect } from "react-redux";
import { createPengunjung } from "@/actions/pengunjung";
import ChartdataHome from "../../components/Main/ChartdataHome";
import { getCsrf } from "../../actions/security";

const menu = [
  {
    title: "Home",
    path: "/app",
  },
  {
    title: "Buat Laporan",
    path: "/laporan/new",
  },
  {
    title: "Pemantauan",
    path: "/pemantauan",
  },
];
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
    };
  }

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

  async componentDidMount() {
    const { token } = this.props;
    const getToken = await getCsrf();
    const _csrf = getToken.token;
    if (!token) {
      await createPengunjung(_csrf);
    }
  }

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

  render() {
    return (
      <div>
        <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>
          <Jumbotron>
            <Row className="home-1">
              <Col lg={8} className="d-flex flex-column justify-content-center align-items-start">
                <h1 className="display-5 home-2 txt-size">Sistem Informasi Pengendalian Kelembagaan Perguruan Tinggi</h1>
                <p className="lead txt-size">Layanan Pelaporan Pelanggaran Perguruan Tinggi Penyelenggara Pendidikan Tinggi</p>
                <hr className="my-4" />
                <p className="txt-size">Disediakan kepada masyarakat untuk melaporkan dugaan pelanggaran dalam penyelenggaraan pendidikan tinggi</p>

                <p className="lead">
                  {/* <Link href="/laporan/new">
										<button className="btn btn-info btn-lg"><img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon"/>Buat Laporan</button>
									</Link> */}
                  <Link href="/laporan/new">
                    <span className="btn-radius">
                      <Button color="" className="btn-labeled">
                        <span className="btn-label">
                          <img className="icon-buatlaporan" src="/static/img/icon-buat-laporan.png" alt="icon" />
                        </span>
                        <text className="text-button-home-1 font-color-white">Buat Laporan</text>
                      </Button>
                    </span>
                  </Link>
                  <Link href="/pemantauan">
                    <span className="btn-radius">
                      <Button color className="btn-labeled-2">
                        <span className="btn-label">
                          <img className="icon-pemantauan" src="/static/img/icon-pemantauan.png" alt="icon" />
                        </span>
                        <text className="text-button-home-1 font-color-white">Pemantauan</text>
                      </Button>
                    </span>
                  </Link>
                </p>
                <div id="video-css">
                  <video controls>
                    <source src="/static/img/video/video_buat_laporan_v3.mp4" type="video/mp4" />
                  </video>
                  <div className="d-flex flex-column">
                    <div>
                      <ChartdataHome />
                    </div>
                    <div>
                      <img className="pl-5" src="/static/img/ditbaga-logo.png" alt="applogo" />
                    </div>
                  </div>
                </div>

              </Col>
              <Col>
                <Login />
                {/* <ChartdataHome /> */}
              </Col>
            </Row>
          </Jumbotron>
          <span>Version 3.0 ~ 3.0</span>
        </ContentWrapper>
      </div>
    );
  }
}

App.Layout = BasePage;

const MapStateToProps = (state) => ({ token: state.token });
export default connect(MapStateToProps)(App);