import React from "react";

import Paper from "@material-ui/core/Paper";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import { BrowserView, MobileView } from "react-device-detect";
import ScheduleIcon from "@material-ui/icons/Schedule";
import Web from "@material-ui/icons/Web";
import AccountTree from "@material-ui/icons/AccountTree";

const bodyDivStyle = {
  margin: "auto",
  marginTop: "75px",
  textAlign: "center",
  width: "1100px",
};

const surfaceColor = "#27292D";
const boxStyle = {
  flex: "1",
  marginLeft: "10px",
  marginRight: "10px",
  height: "400px",
  //backgroundColor: "#e8eaf6",
  backgroundColor: surfaceColor,
  textAlign: "center",
  display: "flex",
  flexDirection: "column",
};

const bodyTextStyle = {
  color: "#ffffff",
};

const hrefStyle = {
  color: "black",
  textDecoration: "none",
};

// Should be different if logged in :|
const LandingPage = (props) => {
  const { isLoaded } = props;

  const textColor = "#8899A6";
  const iconColor = "#1DA1F2";
  const iconSize = "8em";
  const GridLayout = (header, description, link, icon) => {
    return (
      <Paper style={boxStyle}>
        <a href={link} style={hrefStyle}>
          <div style={{ flex: "1", color: "#FFFFFF" }}>
            <h2>{header}</h2>
          </div>
          <Divider />
          <div
            style={{
              flex: "3",
              marginLeft: "10px",
              marginRight: "10px",
              marginTop: "10px",
              color: textColor,
            }}
          >
            {description}
          </div>
          <div style={{ margin: "auto" }}>{icon}</div>
          <Divider style={{ marginTop: "20px", marginBottom: "20px" }} />
          <div style={{ flex: "1", color: "#f85a3e" }}>
            <div style={{}}>Learn more</div>
          </div>
        </a>
      </Paper>
    );
  };

  const listitems = [
    GridLayout(
      "Simple integrations",
      "Easily use others' or create your own integration",
      "/docs/apps",
      <Web
        style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
      />
    ),
    GridLayout(
      "Workflows",
      "Access the power of automation within minutes, whether its on premise or in the cloud",
      "/docs/workflows",
      <AccountTree
        style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
      />
    ),
    GridLayout(
      "Realtime actions",
      "Beat the clock by leveraging our realtime triggers",
      "/docs/triggers",
      <ScheduleIcon
        style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
      />
    ),
  ];

  // The actual landing page
  // <img style={{width: "400px"}} alt={"logo"} src={Default}/>
  const landingpageDataBrowser = (
    <div>
      <div style={bodyTextStyle}>
        <h1>Shuffle</h1>
        <h3 style={{ color: "#8899A6" }}>
          A general automation solution for Infosec and IT Professionals
        </h3>
      </div>
      <a href="/register" style={hrefStyle}>
        <Button
          style={{ width: "180px", height: "50px", borderRadius: "0px" }}
          variant="outlined"
          color="primary"
        >
          Try it out
        </Button>
      </a>
      <a href="/contact" style={hrefStyle}>
        <Button
          style={{ width: "180px", height: "50px", borderRadius: "0px" }}
          variant="contained"
          color="primary"
        >
          Contact
        </Button>
      </a>
      <div style={{ display: "flex", marginTop: "100px" }}>
        {listitems.map((item) => {
          return <div>{item}</div>;
        })}
      </div>
    </div>
  );

  const landingpageDataMobile = (
    <div>
      <div
        style={{
          color: "white",
          textAlign: "center",
          marginLeft: "10px",
          marginRight: "10px",
        }}
      >
        <h1>Shuffle</h1>
        <h3>A general automation solution for Infosec and IT Professionals</h3>
        <a href="/contact" style={hrefStyle}>
          <Button
            style={{ width: "220px", height: "60px", borderRadius: "0px" }}
            variant="contained"
            color="primary"
          >
            Contact
          </Button>
        </a>
      </div>
      <div
        style={{ display: "flex", flexDirection: "column", marginTop: "100px" }}
      >
        <div>{listitems[0]}</div>
        <div style={{ marginTop: "20px" }}>{listitems[1]}</div>
        <div style={{ marginTop: "20px", marginBottom: "30px" }}>
          {listitems[2]}
        </div>
        <div
          style={{
            marginTop: "20px",
            marginBottom: "30px",
            textAlign: "center",
          }}
        >
          <a href="/contact" style={hrefStyle}>
            <Button
              style={{ width: "220px", height: "60px", borderRadius: "0px" }}
              variant="contained"
              color="primary"
            >
              Contact
            </Button>
          </a>
        </div>
      </div>
    </div>
  );

  // Reroute if the user is logged in
  // const landingSite = isLoggedIn ? <Workflows globalUrl={globalUrl}{...props} /> : <div style={bodyDivStyle}>{landingpageData}</div>
  const landingSite = <div style={bodyDivStyle}>{landingpageDataBrowser}</div>;

  const loadedCheck = isLoaded ? (
    <div>
      <BrowserView>{landingSite}</BrowserView>
      <MobileView>{landingpageDataMobile}</MobileView>
    </div>
  ) : (
    <div></div>
  );

  return <div>{loadedCheck}</div>;
};
export default LandingPage;