import React, {Component} from 'react';
import './quote.scss'
import { FaQuoteLeft, FaTwitter, FaFacebook } from 'react-icons/fa';
import quotesList from './quotes_list';

export default class quote extends Component {
    constructor(props) {
        super(props);
        this.state = {selectedQuote: this.randomInt(quotesList().length)};
        this.selectRandom = this.selectRandom.bind(this);
    }
    randomInt(size){
      return Math.floor(Math.random() * size);
    }
    selectRandom(){
      this.setState({
        selectedQuote: this.randomInt(quotesList().length)
      })
      // Trigger appear animation again!
      let first = document.getElementById("quote-div");
      let second = document.getElementById("author");
      first.classList.add("appear");
      setTimeout(
        () => first.classList.remove("appear"), 1000
      );
      second.classList.add("appear");
      setTimeout(
        () => second.classList.remove("appear"), 1000
      );
    }
    render() {
      return <div id="main">
      <div className="component-quote" id="quote-box">
        <div id="quote-div">
          <p id="text">
            <FaQuoteLeft id="quote-icon" size={26} style={{"margin-top": 5, "margin-right": 5}}/>
            {quotesList()[this.state.selectedQuote].quote}
          </p>
        </div>
        <p id="author">- {quotesList()[this.state.selectedQuote].author}</p>
        <div id="button-container">
          <div>
            <a id="tweet-quote" href={"https://twitter.com/intent/tweet?&text="+"\""+quotesList()[this.state.selectedQuote].quote+"\" " + quotesList()[this.state.selectedQuote].author} target="_blank"><button><FaTwitter/></button></a>
            
            {/* <button><FaFacebook/></button> */}
          </div>
          <div>
            <button id="new-quote" onClick={this.selectRandom}>New Quote</button>
          </div>
        </div>
      </div>
      <p >By <a id="page-author"href="https://codepen.io/Loosetooth">Loosetooth</a></p>
      </div>;
    }
  }