import { useState, Fragment } from 'react';
import redirect from '../../utils/redirect';
import FunctionPage from '../../components/FunctionPage/FunctionPage';
import FunctionTabs from '../../components/FunctionPage/FunctionTabs';
import FunctionArticle from '../../components/FunctionPage/FunctionArticle';
import FunctionComments from '../../components/FunctionPage/FunctionComments/FunctionComments';
import Loader from '../../components/Loader';
import api from '../../utils/api';
import '../../public/css/pages/FunctionComponent.css';
import '../../components/FunctionCard/FunctionCard.css';
import '../../public/css/pages/functions/rightPrice.css';

const PlayRightPrice = () => {

    const [isPlaying, setIsPlaying]               = useState(false);
    const [productToGuess, setProductToGuess]     = useState({});
    const [isLoadingProduct, setIsLoadingProduct] = useState(false);
    const [enteredPrice, setEnteredPrice]         = useState("");
    const [attemptsArray, setAttemptsArray]       = useState([]);

    const handlePlaying = () => {
        setIsPlaying(true);
        setAttemptsArray([]);
        fetchRandomAmazonProduct();
    }

    const fetchRandomAmazonProduct = async () => {
        setIsLoadingProduct(true);
        const { data } = await api.post('/functions/rightPrice');
        setProductToGuess(data);
        setIsLoadingProduct(false);
    }

    const handleChange = (event) => {
        setEnteredPrice(event.target.value);
    }

    const handleSubmit = async (event) => {
        event.preventDefault();
        const objectTry    = {};
        const guessedPrice = Number((enteredPrice).replace(",", ".").replace(" ", ""));
        if (!isNaN(guessedPrice)) {
            objectTry.guessedPrice = guessedPrice;
            objectTry.numberTry    = attemptsArray.length + 1;
            if (guessedPrice > productToGuess.price) {
                objectTry.message = "C'est moins !";
            } else if (guessedPrice < productToGuess.price) {
                objectTry.message = "C'est plus !";
            } else {
                objectTry.message = "Bravo, vous avez trouvé le juste prix !";
            }
            setAttemptsArray([objectTry, ...attemptsArray]);
        }
        setEnteredPrice("");
    }
    
    return (
        <div className="container-fluid">
            {
                (!isPlaying) ?
                <div className="row justify-content-center">
                    <div className="form-group text-center">
                        <button onClick={handlePlaying} type="submit" className="btn btn-dark">Jouer</button>
                    </div>
                </div>
                : (isLoadingProduct) ?
                <div className="row justify-content-center">
                    <Loader />
                </div>
                :
                <Fragment>
                    <div className="row justify-content-center">
                        <div style={{ marginBottom: '20px' }} className="col-24 text-center">
                            <h4>{productToGuess.name}</h4>
                            <img src={productToGuess.image} alt={productToGuess.name} className="Product__image" />
                        </div>
                    </div>

                    <div className="row justify-content-center">
                        <div style={{ marginBottom: '25px' }} className="col-24">
                            {((attemptsArray.length > 0) && attemptsArray[0].message === "Bravo, vous avez trouvé le juste prix !") ?
                                    <div className="form-group text-center">
                                        <button onClick={handlePlaying} type="submit" className="btn btn-dark">Rejouer ?</button>
                                    </div>
                                :
                                    <form onSubmit={handleSubmit}>
                                        <div className="text-center">
                                            <input value={enteredPrice} onChange={handleChange} name="enteredPrice" id="enteredPrice" type="number" step="0.01" className="form-control" autoComplete="off" placeholder="Devinez le prix (prix à virgule possible!)" />
                                        </div>

                                        <div className="form-group text-center">
                                            <button type="submit" className="btn btn-dark">Deviner</button>
                                        </div>
                                    </form>
                            }
                        </div>
                    </div>

                    <div style={{ marginBottom: '30px' }} className="row justify-content-center">
                        {attemptsArray.map((attempt, index) => {
                            const { message } = attempt;
                            let priceResultClass;
                            if (message === "C'est moins !") {
                                priceResultClass = "Price__result-moins";
                            } else if (message === "C'est plus !") {
                                priceResultClass = "Price__result-plus";
                            } else {
                                priceResultClass = "Price__result-success";
                            }
                            return (
                                <div key={index} className={`col-24 Price__result ${priceResultClass}`}>
                                    # {attempt.numberTry} ({attempt.guessedPrice}) {message}
                                </div> 
                            );
                        })}
                    </div>
                </Fragment>
            }
        </div>
    );
}

const FunctionTabManager = (props) => {
    return (
        <FunctionTabs setSlideIndex={props.setSlideIndex} slideIndex={props.slideIndex}>
            <div style={{ marginTop: '10px' }}>
                <PlayRightPrice />
            </div>
            <div className="FunctionComponent__slide">
                <FunctionArticle article={props.article} />
            </div>
            <div className="FunctionComponent__slide">
                <FunctionComments functionId={props.id} />
            </div>
        </FunctionTabs>
    );
}

const rightPrice = (props) => (
    <FunctionPage 
        FunctionTabManager={FunctionTabManager}
        { ...props }
        tabNames={["⚙️ Utilisation", "📝 Article", "📬 Commentaires"]} 
    />
);

export async function getServerSideProps(context) {
    return api.get(`/functions/rightPrice`)
        .then((response) => ({ props: response.data }))
        .catch(() => redirect(context, '/404'));
}

export default rightPrice;