import React, { useState } from "react";

import Paper from "@material-ui/core/Paper";
import Card from "@material-ui/core/Card";
import CardActionArea from "@material-ui/core/CardActionArea";
import CardMedia from "@material-ui/core/CardMedia";
import CardContent from "@material-ui/core/CardContent";
import CardActions from "@material-ui/core/CardActions";
import Button from "@material-ui/core/Button";
import Divider from "@material-ui/core/Divider";
import Grid from "@material-ui/core/Grid";
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";
import InfoIcon from "@material-ui/icons/Info";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import CreateIcon from "@material-ui/icons/Create";

const bodyDivStyle = {
  margin: "auto",
};

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: "inherit",
  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/features",
      <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/features",
      <AccountTree
        style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
      />
    ),
    GridLayout(
      "Realtime actions",
      "Beat the clock by leveraging our realtime triggers",
      "/docs/features",
      <ScheduleIcon
        style={{ fontSize: iconSize, marginTop: "20px", color: iconColor }}
      />
    ),
  ];

  // The actual landing page
  // <img style={{width: "400px"}} alt={"logo"} src={Default}/>
  //We start by understanding your unique environment to help identify the right thing to automate.
  const secondaryColor = "rgba(167,46,87,1)";
  const primaryColor = "rgba(25, 35, 94, 1)";

  const paperStyle = {
    flex: 1,
    backgroundColor: "inherit",
    cursor: "pointer",
  };

  const secondaryItemList = [
    {
      primaryText: "No time to waste",
      secondaryText:
        "Bring all your applications into a single view, and make them all work together flawlessly!",
      image: "/images/time.jpg",
    },
    {
      primaryText: "Get a better overview",
      secondaryText:
        "Don't know what's happening? We'll help you track and act on your most valuable KPI's!",
      image: "/images/overview.jpg",
    },
    {
      primaryText: "Conquer your tasks",
      secondaryText:
        "Get access to powerful tools and pre-made workflows to help you crush your teams daily tasks!",
      image: "/images/burnout.jpg",
    },
  ];
  const [image, setImage] = useState(secondaryItemList[0].image);

  const landingpageDataBrowser = (
    <div>
      <div
        style={{
          backgroundImage: "url('/images/test.jpg')",
          backgroundSize: "80% 100%",
          backgroundRepeat: "no-repeat",
          minHeight: "100vh",
          maxHeight: 1024,
        }}
      >
        <div
          style={{
            textAlign: "left",
            paddingTop: 135,
            maxWidth: 700,
            paddingLeft: "50%",
            color: secondaryColor,
            display: "flex",
            fontSize: 25,
          }}
        >
          <div style={{ flex: 1 }}>
            <a href="/docs/about" style={hrefStyle}>
              <Grid container direction="row" alignItems="center">
                <Grid item>
                  <InfoIcon />
                </Grid>
                <Grid item style={{ marginLeft: 5 }}>
                  About
                </Grid>
              </Grid>
            </a>
          </div>
          <div style={{ flex: 1 }}>
            <a href="/contact" style={hrefStyle}>
              <Grid container direction="row" alignItems="center">
                <Grid item>
                  <CreateIcon />
                </Grid>
                <Grid item style={{ marginLeft: 5 }}>
                  Get in touch
                </Grid>
              </Grid>
            </a>
          </div>
          <div style={{ flex: 1 }}>
            <a href="/login" style={hrefStyle}>
              <Button
                style={{
                  borderRadius: 25,
                  height: 50,
                  minWidth: 200,
                  backgroundColor: secondaryColor,
                  color: "white",
                }}
                variant="contained"
              >
                Try it out <ArrowForwardIcon />
              </Button>
            </a>
          </div>
        </div>
        <div
          style={
            (bodyTextStyle,
            {
              textAlign: "left",
              paddingTop: "8%",
              paddingLeft: "28%",
              maxWidth: 430,
            })
          }
        >
          <div style={{ fontSize: 25, color: "rgba(0,0,0,0.45)" }}>Shuffle</div>
          <div style={{ fontSize: 50, color: "rgba(0,0,0,0.7)" }}>
            INFORMATION <div style={{ color: secondaryColor }}>OVERLOAD</div>
          </div>
          <div
            style={{
              fontSize: 20,
              color: "rgba(0, 0, 0, 0.45)",
              marginTop: 20,
            }}
          >
            Everyone run into the same fundamental operational problems. Mailbox
            chaos, tickets getting out of hand and a constant feeling of being
            overwhelmed. The good news?{" "}
            <div style={{ color: secondaryColor, marginTop: 10 }}>
              Shuffle solves them.
            </div>
          </div>
          <a href="/docs/features" style={hrefStyle}>
            <Button
              style={{
                borderRadius: 25,
                height: 50,
                marginTop: 50,
                width: 200,
                backgroundColor: secondaryColor,
                color: "white",
              }}
              variant="contained"
            >
              Learn how
            </Button>
          </a>
        </div>
      </div>
      <div
        style={{
          minHeight: 1024,
          width: "100%",
          backgroundImage: "linear-gradient(to bottom right, #19235e, #19235e)",
        }}
      >
        <div
          style={{
            minHeight: 1000,
            paddingTop: 150,
            maxWidth: 1250,
            margin: "auto",
          }}
        >
          <div
            style={{
              color: "rgba(255,255,255,0.8",
              fontSize: 60,
              marginLeft: 25,
            }}
          >
            <b>Automation is just the beginning </b>
          </div>
          <div style={{ marginTop: 40, display: "flex", flexDirection: "row" }}>
            <div
              style={{
                flex: 8,
                display: "flex",
                flexDirection: "column",
                fontSize: 40,
              }}
            >
              {secondaryItemList.map((data, index) => {
                const color =
                  image === data.image
                    ? "rgba(255,255,255,1)"
                    : "rgba(255,255,255,0.4)";
                return (
                  <div
                    style={{
                      borderRadius: 15,
                      padding: 25,
                      maxWidth: 600,
                      height: 150,
                      fontSize: 40,
                      color: color,
                      cursor: "pointer",
                    }}
                    onClick={() => setImage(data.image)}
                  >
                    {data.primaryText}
                    <div style={{ fontSize: 22, marginTop: 10 }}>
                      {data.secondaryText}
                    </div>
                  </div>
                );
              })}
            </div>
            <div style={{ flex: 1 }} />
            <div style={{ flex: 10, height: "100%", width: "100%" }}>
              <img
                src={image}
                style={{
                  borderRadius: 15,
                  minHeight: "100%",
                  minWidth: "100%",
                  maxWidth: "100%",
                  maxHeight: "100%",
                }}
              />
            </div>
          </div>
        </div>
        <div
          style={{
            maxWidth: 1250,
            paddingTop: 100,
            paddingBottom: 100,
            margin: "auto",
            color: "rgba(255,255,255,0.8)",
          }}
        >
          <Divider style={{ backgroundColor: "rgba(255,255,255,0.6)" }} />
          <div
            style={{
              marginTop: 100,
              fontSize: 40,
              display: "flex",
              marginLeft: 100,
              marginRight: 100,
            }}
          >
            <div style={{ flex: 3 }}>
              Learn more about the benefits of Shuffle
            </div>
            <div style={{ flex: 1 }}>
              <a href="/docs/features" style={hrefStyle}>
                <Button
                  fullWidth
                  style={{
                    borderRadius: 25,
                    minHeight: 50,
                    minWidth: 200,
                    backgroundColor: secondaryColor,
                    color: "white",
                  }}
                  variant="contained"
                >
                  See features
                </Button>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          textAlign: "center",
          maxWidth: 1100,
          minHeight: 600,
          paddingTop: 100,
          margin: "auto",
          color: "rgba(0,0,0,1)",
        }}
      >
        <div style={{ fontSize: 50 }}>
          <b>Focus on the work that matters to you</b>
        </div>
        <div
          style={{ fontSize: 20, color: "rgba(0,0,0,0.7)", maxWidth: "100%" }}
        >
          Menial tasks, scattered content, constant copy pasting, waste of
          talent - <b>there's a smarter way to work.</b>
        </div>
        <div style={{ display: "flex", marginTop: 50 }}>
          <Card
            onClick={() => {
              window.location.pathname = "/docs/features";
            }}
            style={{ flex: 1, margin: 10, textAlign: "center" }}
          >
            <CardActionArea>
              <CardMedia title="TEST" image="/images/time.jpg" />
              <CardContent>
                <h3>Premade playbooks</h3>
                <p>Get your automation done with minimal effort</p>
              </CardContent>
            </CardActionArea>
            <Button size="medium" color="green">
              Learn more
            </Button>
          </Card>
          <Card
            onClick={() => {
              window.location.pathname = "/docs/features";
            }}
            style={{ flex: 1, margin: 10, textAlign: "center" }}
          >
            <CardActionArea>
              <CardMedia title="TEST" image="/images/time.jpg" />
              <CardContent>
                <h3>Open frameworks</h3>
                <p>Mitre Att&ck, OpenAPI and more!</p>
              </CardContent>
            </CardActionArea>
            <Button size="medium" color="green">
              Learn more
            </Button>
          </Card>
          <Card
            onClick={() => {
              window.location.pathname = "/docs/features";
            }}
            style={{ flex: 1, margin: 10, textAlign: "center" }}
          >
            <CardActionArea>
              <CardMedia title="TEST" image="/images/time.jpg" />
              <CardContent>
                <h3>Hundreds of integrations</h3>
                <p>Quickly integrate your software applications</p>
              </CardContent>
            </CardActionArea>
            <Button size="medium" color="green">
              Learn more
            </Button>
          </Card>
          <Card
            style={{ flex: 1, margin: 10, textAlign: "center" }}
            onClick={() => {
              window.location.pathname = "/docs/features";
            }}
          >
            <CardActionArea>
              <CardMedia title="TEST" image="images/time.jpg" />
              <CardContent>
                <h3>Automated compliance</h3>
                <p>Stuck with compliance needs you can't meet?</p>
              </CardContent>
            </CardActionArea>
            <Button size="medium" color="green">
              Learn more
            </Button>
          </Card>
        </div>
      </div>
    </div>
  );

  const landingpageDataMobile = (
    <div style={{ backgroundColor: "#1F2023", paddingTop: 30 }}>
      <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;