import React, { createRef } from 'react';
import { Link } from "react-router-dom";
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Divider from '@material-ui/core/Divider';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ArrowRight from '@material-ui/icons/ArrowRight';
import CheckRounded from '@material-ui/icons/CheckRounded';
import Button from '@material-ui/core/Button';
import color from '@edma/design-tokens/tokens/js/color';
import fontSize from '@edma/design-tokens/tokens/js/fontSize';
import ScrollToTopController from './components/ScrollToTopController';

const useStyles = makeStyles(theme => ({
  toolbar: {
    height: '30vw',

    [theme.breakpoints.up('lg')]: {
      height: '20vw',
    },

    [theme.breakpoints.up('md')]: {
      height: '15vw',
    },
  },
  content: {
    margin: 40,
    flexGrow: 1,
    padding: theme.spacing(2),
    [theme.breakpoints.up('md')]: {
      padding: theme.spacing(3),
    }
  },
  flexCards: {
    display: 'inline-flex',
    justifyContent: 'space-between',
    flexWrap: 'no-wrap',
    width: '100%',
  },
  anchor: {
    color: theme.palette.type === 'light' ? color.b400 : color.b200,

    '&:hover': {
      textDecoration: 'none',
    },
  },
  button: {
    color: theme.palette.type === 'light' ? color.b400 : color.b200,
    borderColor: theme.palette.type === 'light' ? color.b400 : color.b200,
    textDecoration: 'none',

    '&:not(:first-of-type)': {
      margin: theme.spacing(2),
    },
  },
  inlineCode: {
    background: theme.palette.type === 'light' ? color.g200 : color.g500,
    fontSize: fontSize['0'],
  }
}));

let divs = [];

export default function Home(props) {
  const custom = useStyles();
  const theme = useTheme();
  const lightColorArray = [
    color.b200, color.b300, color.p200, color.p300, color.r200,
    color.r300, color.g300, color.g400, color.g500,
  ];
  const darkColorArray = [
    color.b200, color.b300, color.p200, color.p300, color.r200,
    color.r300, color.g300, color.g200,
  ];
  let blocksContainer = createRef();

  window.addEventListener('scroll', (e) => {
    const scrolled = window.pageYOffset,
          block = blocksContainer.current;

    if (scrolled <= 530) {
      let blockCoords = (0 + (scrolled *0.020) + 'rem'),
          blockOpacity = (1 - (scrolled *0.005));

      if (block) {
        block.style.marginTop = blockCoords;
        block.style.opacity = blockOpacity;
      }
    }
  });

  const generateBlocks = (qty) => {
    for (let i = 0; i < divs.length; i++) {
      if (divs[i].style.opacity === 0)
        divs[i].remove();
    }

    setTimeout(() => {
      for (let i = 0; i < qty; i++) {
        const classy = 'block block-' + i;
        let randomColor;
        if (theme.palette.type === 'light') {
          randomColor = lightColorArray[Math.floor(Math.random()*lightColorArray.length)];
        } else {
          randomColor = darkColorArray[Math.floor(Math.random()*darkColorArray.length)];
        }
        let d = document.createElement("div");

        d.style.cssText = `background-color: ${randomColor}`;
        //d.style.opacity = '0.5';
        d.className = classy;
        if (blocksContainer.current)
          blocksContainer.current.appendChild(d);

        for (let j = 0; j < 40; j++) {
          let randomDisplay = Math.floor(Math.random()*qty);

          setTimeout(() => {
            if (classy === 'block block-' + randomDisplay) {
              d.style.opacity = 0.5;
            }
          }, randomDisplay*10);
        }
      }
    }, 0);
  };

  generateBlocks(31);

  return (
    <main className={custom.content}>
      <div ref={blocksContainer} />
      <ScrollToTopController />
      <div className={custom.toolbar} />
      <div className="content" >
        <Typography variant="h5">
          Building blocks for rapidly creating consistently great designs and front end experiences. Blocks provides design principles, tokens, and stateless React components.
        </Typography>

        <Box mt={7}>
          <Divider />
        </Box>

        <Box mt={10}>
          <Typography variant="h3" gutterBottom>
            Getting Started
          </Typography>
        </Box>
        <Box mt={5}>
          <Typography variant="h5" gutterBottom>
            Principled Design Practices
          </Typography>
          <Typography variant="body1" gutterBottom>
            The first step to working with Blocks is understanding the core principles of the system. These principles provide guiding design philosophies that help keep us honest while working to design consistently usable experiences. <br/><br/>

            <Link to="/principles/" className={custom.button}>
              <Button className={custom.button} color="primary" variant="outlined">View Design Principles</Button>
            </Link>
          </Typography>
        </Box>
        <Box mt={10}>
          <Typography variant="h5" gutterBottom>
            Overview
          </Typography>
          <Typography variant="body1" gutterBottom>
            Blocks is foundationally Google Material UI, with modified components and additional features built on top, designed to meet PennyMac's specific needs. Blocks is flexible. It changes with PennyMac, as those needs evolve over time.<br/><br/>
            Some reasons why you should consider building with Blocks:
          </Typography>
          <List>
            <ListItem dense>
            <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="Faster design means more design" secondary="The Figma pattern library provides designers with cutting-edge tooling for rapidly producing pixel perfect prototypes." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="Lean and DRY" secondary="Blocks apps share the same foundational code, which leads to less bloated and ultimately more performant codebases." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="Visual control" secondary="Material UI's built in theme tools provide simple yet powerful cross-platform visual controls for theming any app." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="More heads are better" secondary="Deep integration with the Figma REST API helps to automate design token handoff, enabling designers to hand off production-ready code assets and better collaborate with developers." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="The more we build, the faster we build" secondary="Blocks' library of reusable components grows over time, reducing the time required to build apps." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="Dramatic Meltdown Prevention System" secondary="Core design principles provide the entire app dev team with a shared vision and set of goals, which acts exceedingly well as our argument and meltdown avoidance system." />
            </ListItem>
            <ListItem dense>
              <ListItemIcon>
                <CheckRounded />
              </ListItemIcon>
              <ListItemText primary="Reusable is more usable" secondary="Lessons learned over time through our iterative, component-based workflows improve overall usability across the board." />
            </ListItem>
          </List>
        </Box>
        <Box mt={7}>
          <Divider />
        </Box>
        <Box mt={10}>
          <Typography variant="h5" gutterBottom>
            Working With &amp; Contributing To Blocks
          </Typography>
          <Typography variant="body1" gutterBottom>
            There are two paths to working with Blocks. The first is for designers, the second is for front end developers. In order to work with Blocks, you will need a recent version of Node (10+) with NPM installed.
          </Typography>
        </Box>
        <Box mt={5}>
          <Typography variant="h6">
            For Designers
          </Typography>
          <Typography variant="body1" gutterBottom>
            Designing with Blocks essentially means working in Figma and Principle. Figma is used for creating and exporting design tokens, as well as mocking up static screens and components. Principle is used for mocking up rich interactions, such as hover, drag, and click interactions. <br/><br/>

            <a href='https://www.figma.com/file/SKkSxha8LQG7lPvIJ2PWHf/Design-Tokens?node-id=0%3A1' target='_blank' rel="noopener noreferrer" className={custom.button}>
              <Button color="primary" variant="outlined" className={custom.button}>View Figma Tokens</Button>
            </a>
            <a href='https://www.figma.com/file/k9LG6iA4oKNiCyIc9TrNmD/Material-Theme?node-id=0%3A2' target='_blank' rel="noopener noreferrer" className={custom.button}>
              <Button color="primary" variant="outlined" className={custom.button}>View Material Theme</Button>
            </a><br/><br/>
          </Typography>
          <List>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Open the <a href='https://www.figma.com/files/team/720698272864929877/EDMA' target='_blank' rel="noopener noreferrer" className={custom.anchor}>EDMA Team</a> in Figma</ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Create a new project within the EDMA team, or load an existing project and design stuff</ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>If any design token updates are required, clone the <a href='https://gitlab.pnmac.com/ent-bi-tech/design-tokens' target='_blank' rel="noopener noreferrer" className={custom.anchor}>design-tokens</a> repo and run  <code className={custom.inlineCode}>npm install</code>, and then <code className={custom.inlineCode}>npm run tokens</code> to generate design tokens</ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Once tokens have been generated, uptick the version in <code className={custom.inlineCode}>package.json</code> and commit your changes to GitLab for review</ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Once approved, publish the updated package to NPM by running <code className={custom.inlineCode}>npm publish</code></ListItemText>
            </ListItem>
          </List>
        </Box>
        <Box mt={5}>
          <Typography variant="h6">
            For Developers
          </Typography>
          <Typography variant="body1" gutterBottom>
            Blocks contains a variety of tools that can help expedite, and even automate, some front end development tasks. The front end stack leverages the Material-React library, is built using React.js with support from a CLI design token generator. <br/><br/>

            <a href='https://gitlab.pnmac.com/ent-bi-tech/design-docs' target='_blank' rel="noopener noreferrer" className={custom.button}>
              <Button color="primary" variant="outlined" className={custom.button}>View Blocks Repository</Button>
            </a>
            <a href='https://gitlab.pnmac.com/ent-bi-tech/design-tokens' target='_blank' rel="noopener noreferrer" className={custom.button}>
              <Button color="primary" variant="outlined" className={custom.button}>View Design-tokens Repository</Button>
            </a><br/><br/>
          </Typography>
          <List>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Scaffold a new react app using <a href='https://github.com/facebook/create-react-app' target='_blank' rel="noopener noreferrer" className={custom.anchor}>Create-react-app</a> and add it to a new repository in <a href="https://gitlab.pnmac.com/ent-bi-tech" target='_blank' rel="noopener noreferrer" className={custom.anchor}>GitLab</a></ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText secondary="This will also install the material-ui and edma design-tokens packages, giving you access to all of our design tokens and Material components">Install Blocks as dev dependencies by running <code className={custom.inlineCode}>npm i @edma/blocks --save-dev</code> in your repo</ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Include Blocks components in your app with<br/><code className={custom.inlineCode}>import [Example] from '@edma/blocks/src/components/[Example]';</code></ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Include Material-ui components in your app with<br/><code className={custom.inlineCode}>import [Example] from '@material-ui/core/[Example]';</code></ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Include ES6 design tokens in your app with<br/><code className={custom.inlineCode}>import [Example] from '@edma/design-tokens/tokens/js/[Example]';</code></ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>Include Sass design tokens in your app with<br/><code className={custom.inlineCode}>@import '~@edma/design-tokens/tokens/_scss/[Example]';</code></ListItemText>
            </ListItem>
            <ListItem>
              <ListItemIcon>
                <ArrowRight />
              </ListItemIcon>
              <ListItemText>To update design tokens to the latest version at any time, simply run <code className={custom.inlineCode}>npm run tokens</code> in your repo</ListItemText>
            </ListItem>
          </List>
        </Box>
      </div>
    </main>
  )
};
