import React, { Component } from "react";
import logo from "./cscLogo.png";
import "./App.css";

import MyForm from "./components/MyForm";
import FormatText from "./components/FormatText";

class App extends Component {
  state = {
    name: "",
    abstract: "",
    description: "",
    date: "",
    time: "",
    show: false,
  };

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = () => {
    this.setState({ show: true });
  };

  render() {
    return (
      <div className="App">
        <img src={logo} class="logo" alt="Logo" />
        <MyForm
          name={this.state.name}
          date={this.state.date}
          time={this.state.time}
          abstract={this.state.abstract}
          description={this.state.description}
          handleChange={this.handleChange}
          handleSubmit={this.handleSubmit}
        />

        {this.state.show ? (
          <FormatText
            name={this.state.name}
            date={this.state.date}
            time={this.state.time}
            abstract={this.state.abstract}
            description={this.state.description}
            show={this.state.show}
          />
        ) : (
          <div></div>
        )}
      </div>
    );
  }
}

export default App;