import { render } from "react-dom";
import { Component } from "react";
import { Form, Col, Button, Alert } from "react-bootstrap";

class UserPageFormComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      income: "",
      goal: "",
      input: "",
      category: "Auto & Transport",
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    event.preventDefault();
    const diff = parseInt(this.state.income) - parseInt(this.state.input);
    const data = {
      email: this.props.user.email,
      month: parseInt(this.props.month),
      year: parseInt(this.props.year),
      labels: ["Income", "Net Income", this.state.category],
      data: [this.state.income, diff.toString(), this.state.input],
      goal: this.state.goal,
    };

    fetch("/api/userbudgets", {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((response) => {
      if (response.status >= 200 && response.status < 300) {
        this.props.update(this.props.month, this.props.year);
      } else {
        Alert("Something Went Wrong Try Again");
      }
    });
  }

  render() {
    return (
      <div>
        <h4>Finances For This Month</h4>
        <Form onSubmit={this.handleSubmit}>
          <Form.Group controlId="monthlyIncomeUser">
            <Form.Label>Income($):</Form.Label>
            <Form.Control
              name="income"
              placeholder="7000"
              type="number"
              value={this.state.income}
              onChange={this.handleChange}
              onKeyDown={(evt) =>
                ["e", "E", "+"].includes(evt.key) && evt.preventDefault()
              } //Stop the user from entering the letter 'e'
              required
            />
          </Form.Group>
          <Form.Group controlId="monthlyNetIncomeGoal">
            <Form.Label>Net Income Goal For This Month($):</Form.Label>
            <Form.Control
              name="goal"
              placeholder="3500"
              type="number"
              value={this.state.goal}
              onChange={this.handleChange}
              onKeyDown={(evt) =>
                ["e", "E", "+"].includes(evt.key) && evt.preventDefault()
              } //Stop the user from entering the letter 'e'
              required
            />
          </Form.Group>

          <Form.Row>
            <Form.Group as={Col} md="4" controlId="categoryUser">
              <Form.Label>Category:</Form.Label>
              <Form.Control
                as="select"
                name="category"
                onChange={this.handleChange}
                value={this.state.category}
              >
                <option value="Auto & Transport">Auto & Transport</option>
                <option value="Bills & Utilities">Bills & Utilities</option>
                <option value="Business Services">Business Services</option>
                <option value="Education">Education</option>
                <option value="Entertainment">Entertainment</option>
                <option value="Fees & Charges">Fees & Charges</option>
                <option value="Financials">Financials</option>
                <option value="Food & Dining">Food & Dining</option>
                <option value="Gifts & Donations">Gifts & Donations</option>
                <option value="Health & Fitness">Health & Fitness</option>
                <option value="Home">Home</option>
                <option value="Personal Care">Personal Care</option>
                <option value="Pets">Pets</option>
                <option value="Shopping">Shopping</option>
                <option value="Groceries">Groceries</option>
                <option value="Taxes">Taxes</option>
                <option value="Travel">Travel</option>
                <option value="Memberships">Memberships</option>
                <option value="Other">Other</option>
              </Form.Control>
            </Form.Group>
            <Form.Group as={Col} md="8" controlId="expenseUser">
              <Form.Label>Expense($):</Form.Label>
              <Form.Control
                name="input"
                placeholder="300"
                value={this.state.input}
                type="number"
                onChange={this.handleChange}
                onKeyDown={(evt) =>
                  ["e", "E", "+"].includes(evt.key) && evt.preventDefault()
                } //Stop the user from entering the letter 'e'
                required
              />
            </Form.Group>
          </Form.Row>
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </div>
    );
  }
}

export default UserPageFormComponent;