import React, { Component } from 'react';
import ChristmasForm from './form'
import './App.css';
import { MdWarning as WarningIcon } from 'react-icons/md'
import { TiTree as TreeIcon } from 'react-icons/ti'
import { FaSmileWink as WinkEmoji } from 'react-icons/fa'

const styles = {
  row: {
    display: 'inline-block'
  },
  main: {
    display: 'flex'
  },
  meat: {
    flex: 3,
    backgroundColor: '#8cdb80'
  },
  warning: {
    display: 'inline-block',
    color: 'yellow',
    fontSize: '36pt'
  },
  tree: {
    display: 'block',
    fontSize: '48pt',
    color: 'green'
  },
  spin: {
    animation: 'App-logo-spin infinite 20s linear'
  },
  logo: {
    height: '12em'
  },
  columnLeft: {
    flex: 1,
    backgroundColor: '#ff0000'
  },
  columnRight: {
    flex: 1,
    backgroundColor: '#ff0000'
  }
}

class App extends Component {


  render() {
    return (
      <div className="App" style={styles.main}>
      <aside style={styles.columnLeft}>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
        <span style={styles.tree}>
          <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
        </span>
      </aside>
        <header className="App-header" style={styles.meat}>
          <img src='https://jokideo.com/wp-content/uploads/meme/2014/11/Why-santas-sack-so-big---christmas-meme.jpg'  alt="logo" style={styles.logo} />

          <h1>MERRY CHRISTMAS <WinkEmoji /> </h1>
          <span style={styles.warning}><WarningIcon /> Warning: KIDS-FREE PARTY <WarningIcon/> </span>
          <br />
          <ChristmasForm />
          <br />
          <br />
          <br />
        </header>
        <aside style={styles.columnRight}>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
          <span style={styles.tree}>
            <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/> <TreeIcon style={styles.spin}/>
          </span>
        </aside>
      </div>
    );
  }
}

export default App;