var body = document.body;
body.classList.add("same-color");

document.documentElement.style.setProperty("--trans-time", "0.5s");

class QuoteBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            quote: "",
            author: "",
            tweetIntent: "https://twitter.com/intent/tweet"
        };

        this.handleNewQuote = this.handleNewQuote.bind(this);
    }

    handleNewQuote() {
        const this_func = this;
        const colorArray = ["#16A085", "#1974D2", "#27AE60", "#E74C3C", "#FFAA1D", "#FF007F"];
        let newColor = colorArray[Math.floor(Math.random() * colorArray.length)];

        document.documentElement.style.setProperty("--color", "white");
        document.documentElement.style.setProperty("--bg", newColor);

        async function getApi() {
            return fetch("https://api.quotable.io/random?tags=famous-quotes")
            .then(Response => Response.json())
            .then(data => ({
                quote: data.content,
                author: data.author,
                tweetIntent: `https://twitter.com/intent/tweet?text=${data.content}%0A-${data.author}`
            }));
        };

        async function updateQuote() {
            let responseData = await getApi();

            setTimeout(() => {
                this_func.setState(() => ({
                    quote: responseData.quote,
                    author: responseData.author,
                    tweetIntent: responseData.tweetIntent
                }));

                document.documentElement.style.setProperty("--color", newColor);
            }, 500);

        };

        updateQuote();
    }

    componentDidMount() {
        this.handleNewQuote();
    }

    render() {
        return (
            <div id="quote-box">
                <QuoteText quote={this.state.quote}/>
                <QuoteAuthor author={this.state.author}/>
                <ButtonContainer handleNewQuote={this.handleNewQuote} tweet={this.state.tweetIntent}/>
            </div>
        );
    }
};

class QuoteText extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id="text-container">
                <span id="text" className="same-color faded">{this.props.quote}</span>
            </div>
        );
    }
};

class QuoteAuthor extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id="author-container">
                <span id="author" className="same-color faded">{"-" + this.props.author}</span>
            </div>
        );
    }
};

class ButtonContainer extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div id="button-container">
                <a href={this.props.tweet} id="tweet-quote" className="same-color padded-button" target="_blank">
                    <i className="fa-brands fa-twitter"></i>
                </a>
                <button id="new-quote" className="same-color padded-button" onClick={this.props.handleNewQuote}>New Quote</button>
            </div>
        );
    }
};

// To render root element
const rootDiv = document.getElementById("wrapper")
const root = ReactDOM.createRoot(rootDiv);
document.body.onload = () => {
    root.render(<QuoteBox />);
};