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'
import { Button } from '@material-ui/core'

const styles = {
  row: {
    display: 'inline-block'
  },
  main: {
    // display: 'flex'
  },
  meat: {
    flex: 3,
    backgroundColor: '#ffffff'
  },
  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: '42em'
  },
  columnLeft: {
    flex: 1,
    backgroundColor: '#ff0000'
  },
  columnRight: {
    flex: 1,
    backgroundColor: '#ff0000'
  }
}

class App extends Component {

  testClick = async () => {
    await fetch('http://localhost:3002/test', {
      method: 'POST',
      body: { test: 'test body' }
    })
  }

  render() {
    return (
      <div className="App" style={styles.main}>

        <header className="App-header" style={styles.meat}>
          <img src={require('./invite.jpeg')} alt="invite" style={styles.logo}/>
          <ChristmasForm />
        </header>
        <Button onClick={this.testClick}> TEST </Button>
      </div>
    );
  }
}

export default App;

