import React, { Component } from 'react';
import AskForm from '../../components/AskForm.js';
import fire from '../../config/Fire.js';
import { Link, withRouter } from 'react-router-dom'

class Ask extends Component {
  constructor(props){
    super(props);
    this.addTicket = this.addTicket.bind(this);
    this.database = fire.database().ref().child('tickets');

    this.state = {
      tickets: [],
      userId: this.props.user.uid
    }
  }

  componentDidMount(){
    fire.database().ref('/users/' + this.props.user.uid).once('value').then(function(snapshot) {
      var FirstName = (snapshot.val() && snapshot.val().userFirstName);
      // ...
      console.log(FirstName);
    });
  }

  addTicket(title, body){
    this.database.push().set({ ticketUserId: this.props.user.uid, ticketTitle: title, ticketBody: body, ticketStatus: 'pending', ticketTime: fire.database.ServerValue.TIMESTAMP});
    alert("Your question has been submitted.")
    this.props.history.push('/pending')
  }

  render() {
    return (
      <div>
        <div className="m-container">
        </div>
        <div>
          <AskForm addTicket={this.addTicket} />
        </div>
      </div>
    );
  }
}

export default withRouter(Ask);

import React, { Component } from 'react';

class AskForm extends Component{
    constructor(props){
        super(props);
        this.state = {
            ticketBody: '',
            ticketTitle: ''
        };
        this.handleChange = this.handleChange.bind(this);
        this.writeTicket = this.writeTicket.bind(this);
    }

    // When the user input changes, set the ticketTitle or ticketBody
    // to the value of what's in the input box.

    handleChange(e) {
        this.setState({ [e.target.name]: e.target.value });
    }

    writeTicket(){
        if(this.state.ticketTitle === '' || this.state.ticketBody === ''){
            alert('Please complete all fields.')
        } else {
            // Call a method that sets the ticketTitle and ticketBody for a ticket to
            // the value of the input
            this.props.addTicket(this.state.ticketTitle, this.state.ticketBody);
            // Set inputs back to an empty string
            this.setState({
                ticketBody: '',
                ticketTitle: ''
            })
        }

    }

    render(){
        return(
            <div class="s-container">
                <form>
                    <label for="ticketTitle">Title: </label>
                    <input
                    id="ticketTitle"
                    name="ticketTitle"
                    type="text"
                    placeholder="A short sentence to identify your issue"
                    value={this.state.ticketTitle}
                    onChange={this.handleChange}
                    />
                    <br/>
                    <br/>
                    <label for="ticketBody">Description: </label>
                    <textarea
                    id="ticketBody"
                    name="ticketBody"
                    placeholder="Placeholder"
                    value={this.state.ticketBody}
                    onChange={this.handleChange}
                    /> &nbsp;
                    <button
                    className="m-btn"
                    onClick={this.writeTicket}>
                    Submit
                    </button>
                </form>
            </div>
        )
    }
}

export default AskForm;