import React from "react";
import "./App.scss";
import { quotesAndAuthors } from "./quotes";

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      quotesAndAuthors: quotesAndAuthors,
      randomIndex: Math.floor(Math.random() * quotesAndAuthors.length),
    };
    this.state.randomQuote =
      this.state.quotesAndAuthors[this.state.randomIndex].quote;
    this.state.randomAuthor =
      this.state.quotesAndAuthors[this.state.randomIndex].author;
    this.handleNewQuote = this.handleNewQuote.bind(this);
  }

  handleNewQuote() {
    this.setState((state) => ({
      randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
    }));
    this.setState((state) => ({
      randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
      randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
    }));
  }

  render() {
    return (
      <div className="body">
        <div className="quote-box" id="quote-box">
          <p className="text" id="text">
            {this.state.randomQuote}
          </p>
          <p className="author" id="author">
            {this.state.randomAuthor}
          </p>
          <button
            className="btn btn-primary"
            id="new-quote"
            onClick={this.handleNewQuote}
          >
            New Quote
          </button>
          <a
            href={`https://twitter.com/intent/tweet?text="${encodeURI(
              `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
            )}&hashtags=quotes,freeCodeCamp`}
            className=""
            id="tweet-quote"
          >
            Tweet Quote
          </a>
        </div>
      </div>
    );
  }
}

export default App;