import React from "react";
import { faTwitter } from "@fortawesome/free-brands-svg-icons";
import { faShuffle } from "@fortawesome/free-solid-svg-icons";
import { faQuoteLeft } from "@fortawesome/free-solid-svg-icons";
import { faQuoteRight } from "@fortawesome/free-solid-svg-icons";
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
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),
      randomColorClass: `color-${Math.floor(Math.random() * 5) + 1}`,
    };
    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);
    this.state.randomBackgroundColorClass = `bg-${this.state.randomColorClass}`;
  }

  handleNewQuote() {
    this.setState((state) => ({
      randomIndex: Math.floor(Math.random() * state.quotesAndAuthors.length),
      randomColorClass: `color-${Math.floor(Math.random() * 10) + 1}`,
    }));
    this.setState((state) => ({
      randomQuote: state.quotesAndAuthors[state.randomIndex].quote,
      randomAuthor: state.quotesAndAuthors[state.randomIndex].author,
      randomBackgroundColorClass: `bg-${state.randomColorClass}`,
    }));
  }

  render() {
    return (
      <div
        className={`body d-flex align-items-center min-vh-100 ${this.state.randomBackgroundColorClass}`}
      >
        <div className="container">
          <div className="card">
            <div className="card-body " id="quote-box">
              <h4 className={`quote ${this.state.randomColorClass}`} id="text">
                <FontAwesomeIcon icon={faQuoteLeft} />
                {` ${this.state.randomQuote} `}
                <FontAwesomeIcon icon={faQuoteRight} />
              </h4>
              <p
                className={`author ${this.state.randomColorClass}`}
                id="author"
              >
                - {this.state.randomAuthor}
              </p>
              <div className="row justify-content-center">
                <button
                  className={`btn col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 ${this.state.randomBackgroundColorClass}`}
                  id="new-quote"
                  onClick={this.handleNewQuote}
                >
                  <FontAwesomeIcon icon={faShuffle} /> Random Quote
                </button>
                <a
                  className="btn bg-color-twitter col-5 col-sm-5 col-md-4 col-lg-3 col-xl-2 offset-1"
                  href={`https://twitter.com/intent/tweet?text="${encodeURI(
                    `${this.state.randomQuote}"\n- By ${this.state.randomAuthor}\n`
                  )}&hashtags=quotes,freeCodeCamp`}
                  id="tweet-quote"
                >
                  <FontAwesomeIcon icon={faTwitter} /> Tweet Quote
                </a>
              </div>
            </div>
          </div>
          <footer>
            <p>
              <a
                className="link-light"
                href="https://radii.dev/freeCodeCamp.org-Front-End-Dev-Libraries/Build-a-Random-Quote-Machine"
              >
                <FontAwesomeIcon icon={faCode} /> {`Source Code & License`}
              </a>
            </p>
          </footer>
        </div>
      </div>
    );
  }
}

export default App;