"use strict";

// color classes defined by css
/*
 * Is there a better way to handle this than hard coding class names?
 * These class names are generated from a map in the SCSS
 * Better to map here and inline styles?
 *
*/
const palettes = [
		"color-red",
		"color-blue",
		"color-sky",
		"color-purple",
		"color-green",
		"color-teal"
	];

// array of quote objects - 
// { name } is used in experience switcher (#quote-select)
const quoteURLs = [
	{ name: "Inspirational", url: "https://gist.githubusercontent.com/nasrulhazim/54b659e43b1035215cd0ba1d4577ee80/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json"},
	{ name: "Anchorman", url: "https://raw.githubusercontent.com/mrhanna/fcc-quotemachine/master/app/quotelists/anchorman.json" }
];

/*
 * This class wraps an array of quote objects (quote/author pairs).
 * randomQuote() handles random quote retrieval, returning a quote object
 * fetchQuotes(url) handles async retrieval of quote array from JSON files
 *		and returns a promise
 * The promise is used to let the app know when it is "safe" to use
 *		randomQuote() (i.e., it will return a quote rather than a pair of empty strings)
 *
 * ^^^ This feels rather like a hack; is there a better way? 
 *
 * Also, where should the instance of this object be stored? 
 *		Right now, it is a prop of the Parent app.
 * 		I chose a prop because the Quotes obj should be const, not reassigned for lifetime of app
 *		Better to declare internally / store in state? 
 *			or Store as member variable?
 *			 (Can/should you do that with React components?)
 *
*/
// stores a list of quote objects
class Quotes {
	constructor() {
		this.quotes = [];
	}
	
	// returns a quote object randomly
	randomQuote() {
		const length = this.quotes.length;
		if (length > 0) {
			return this.quotes[Math.floor(Math.random() * length)];
		} 
		
		return { quote: "", author: "" };
	}
	
	// attempts to fetch quotes from a json resource async-ly
	// returns a promise
	fetchQuotes(url) {
		return fetch(url)
			.then(response => response.json())
			.then(responseJson => { this.quotes = responseJson.quotes; })
			.catch( (err) => { console.error(err.message); this.quotes = [{ quote: "Something went wrong.", author: ""}] });
	}
}

/*
 * Lots of tight coupling, not sure how to handle it.
 * I suppose #quote-box and #quote-select could be child components
 * 	If so, how to interface with single instance of quotes?
 *
 * Is lifecycle hook the best time to call fetchQuotes()?
 *	Is there a good way to hold off on rendering until async completes?
*/
// the app
class QuoteMachine extends React.Component {
	constructor(props) {
		super(props);
		this.state = { };
		this.nextQuote = this.nextQuote.bind(this);
		this.switchExperience = this.switchExperience.bind(this);
	}
	
	// lifecycle hook, fetches an initial quotelist
	componentDidMount() {
		this.props.quotes.fetchQuotes(quoteURLs[0].url)
			.then(this.nextQuote)
	}
	
	// handle next quote button behavior
	// change color, change quote
	nextQuote() {
		this.setState({changing: true});
		setTimeout(() => {
			const quote = this.props.quotes.randomQuote();
			const color = palettes[Math.floor(
				Math.random() * palettes.length)];
			this.setState(Object.assign({}, quote, {color, changing: false}));
		}, 400);
	}
	
	// on (#quote-select) change, load a different list of quotes
	switchExperience(event) {
		this.props.quotes.fetchQuotes(
			quoteURLs[event.target.value].url)
			.then(this.nextQuote)
	}
	
	render() {
		return (
			<div className={"quote-box-wrapper " + this.state.color }>
				
				<select id="quote-select" onChange={this.switchExperience}>
					{	quoteURLs.map((a, index) => <option value={index} key={index}>{a.name}</option>) }
				</select>
				
				<div id="quote-box">
					<div id="quote-wrapper" className={this.state.changing? "changing" : ""}>
						<blockquote>
							<i class="fa fa-quote-left"></i> 
							<span id="text">{this.state.quote}</span>
						</blockquote>
						<cite id="author">
							{this.state.author}
						</cite>
					</div>
					
					<div class="buttons">
						<a id="tweet-quote" target="_blank" href={twitterURL(this.state.quote, this.state.author)}>tweet</a>
						<button id="new-quote" onClick={this.nextQuote}>new quote</button>
					</div>
				</div>
			</div>
		);
	}
}

const twitterURL = (quote, author) => `https://twitter.com/intent/tweet?hashtags=quotes&related=freecodecamp&text=${ encodeURIComponent(quote)}%20-${encodeURIComponent(author)}`;

// instatiate Quotes object here????
ReactDOM.render(<QuoteMachine quotes={new Quotes()} />,
		document.querySelector("#quote-machine"));