content: import React from 'react';
  import Stars from './star';
  import styled from 'styled-components';
  import { Row, Col } from 'react-flexbox-grid';
  
  const Copy = styled.p`
    color: #F86195;
    margin-top: 0;
    margin-bottom: 2em;
  `
  const ProjectTitle = styled.h1`
    color: white;
    margin-top: 1em;
    margin-bottom: 0;
  `
  const ButtonPrimary = styled.button`
  background-color: #F86195;
  width: 310px;
  margin-top: 1em;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  transition: all 250ms;
  border-radius: 3px;
  &:hover {
    background-color: white;
  color: #F86195;
  }
  `
  
  const NumInput = styled.input`
    width: 310px;
    text-align: center;
    padding: 1em;
    box-sizing: border-box;
    background-color: #D0BDFD;
    color: #2D2793;
    border: 0;
    transition: all 250ms;
    &:focus{
      background-color: white;
    }
  `
  const DeathStar = styled.div`
  {
    overflow: hidden;
    display: inline-block;
    position: relative;
    z-index: 1;
    width: 128px;
    height: 166px;
    background: #D0BDFD;
    border-radius: 50%;
    border: solid #2D2793;
    border-width: 0 39px 0 0;
    box-shadow: 0 -20px rgba(187,187,187,0.3) inset;
    &::before {
      content: '';
      display: block;
      width: 45px;
      height: 45px;
      background: white;
      border-radius: 100%;
      position: relative;
      top: 27px;
      left: 12px;
      border: 7px solid #2D2793;
      box-shadow: -20px 0 #D0BDFD inset;
    }
    &::after {
      content: '';
      display: block;
      width: 200px;
      height: 8px;
      margin-top: -54px;
      background: #2D2793;
      position: relative;
      top: 40%;
      box-shadow: 0 5px 5px -5px #262728 inset;
    }
  }
  `
  
  const Flex = styled.div`
    {
      display: flex;
      flex-direction: column;
      position: relative;
      z-index: 1000;
    }
  `
  const DeathLines = styled.div`
    position: relative;
    width: 175px;
    height: 10px;
    top: 10rem;
    left: -7rem;
    display: block;
    background: white;
    border-radius: 20px;
    &::after{
      content: '';
      width: 50px;
      height: 10px;
      background: white;
      left: 12rem;
      position: absolute;
      border-radius: 20px;
    }
  `
  
  const GalaxyBox = styled.div`
    position: relative;
  
    display: inline-block;
    z-index: 9999;
  
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  `
  
  class StarMaker extends React.Component {
    constructor(props) {
      super(props);
      this.onReset = this.onReset.bind(this);
      this.state = {
        numStars: 250,
      }
    }
  
    _handleKeyPress = (e) => {
     if (e.key === 'Enter') {
       this.setNumStars(parseInt(this.state.numStars,10))
     }
   }
  
    setNumStars(num) {
      const numPulses  = [...Array(num).keys()];
      this.pulses = numPulses.map(i => this.generatePulse(i));
      this.forceUpdate()
    }
  
    handleClick(e) {
      e.preventDefault();
      this.setNumStars(parseInt(this.state.numStars,10))
    }
  
    handleChange(e) {
      this.setState({
        numStars: e.target.value
      });
    }
  
    onReset() {
       this.setNumStars(parseInt(0,10)) // set state from getState result
      }
  
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    getRandomColor(){
      let colorValues = ["#F86195", "white", "#D0BDFD", "white"];
      return colorValues[Math.floor(Math.random() * colorValues.length)];
    }
  
    generatePulse(i) {
      const props = {
        key: i,
        top: this.getRandomNumber(-385, 556),
        left: this.getRandomNumber(-1000, 2500),
        scale: `scale(${this.getRandomNumber(1, 20)})`,
        fade: `fade ${this.getRandomNumber(1, 3)}s`,
        scaling: `scaling ${this.getRandomNumber(1, 15)}s`,
        background: `${this.getRandomColor()}`,
      }
      return (<Stars {...props} />)
    }
    componentWillMount() {
      const numPulses  = [...Array(this.state.numStars).keys()];
      this.pulses = numPulses.map(i => this.generatePulse(i));
    }
  
    render() {
      return (
      <Flex>
        <GalaxyBox>
          <Col className="add-flex push-top-20">
            <Row>
              <DeathStar>
                <DeathLines style={{top: '5rem', left: '-2rem'}}/>
                <DeathLines style={{top: '3rem', left: '-6rem'}}/>
              </DeathStar>
            </Row>
            <Row style={{justifyContent: 'center'}}>
              <Col xs={12} sm={12} md={12} lg={12}>
              <ProjectTitle>Star Creator</ProjectTitle>
            </Col>
            <Col xs={12} sm={12} md={12} lg={12}>
              <Copy>Enter 20 to 600 stars below and watch the galaxy come alive right before your eyes!</Copy>
            </Col>
            </Row>
            <Row>
              <form onSubmit={this.handleClick.bind(this)}>
                <Col xs={12} sm={12} md={12} lg={12}>
                  <NumInput min="20" max="600" type="number" placeholder="Enter at least 20 stars" value={this.state.numStars} onChange={this.handleChange.bind(this)} />
                </Col>
                <Col xs={12} sm={12} md={12} lg={12}>
                  <ButtonPrimary>Submit</ButtonPrimary>
                </Col>
              </form>
            </Row>
          </Col>
        </GalaxyBox>
        {this.pulses}
      </Flex>
      );
    }
  }
  
  export default StarMaker;
  