import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import styles from './QuemEMaisProvavel.module.css'

const PERGUNTAS = [
    "Quem é mais provável de... ser expulso do bar primeiro?",
    "Quem é mais provável de... subir no palco do karaokê sem ter sido convidado?",
    "Quem é mais provável de... esquecer de pagar a conta?",
    "Quem é mais provável de... se tornar o melhor amigo do garçom?",
    "Quem é mais provável de... perder o celular até o fim da noite?",
    "Quem é mais provável de... dormir na mesa do bar?",
    "Quem é mais provável de... começar uma briga (ou tentar separar uma)?",
    "Quem é mais provável de... pedir a música mais chata pro DJ?",
    "Quem é mais provável de... ligar pro ex chorando às 3 da manhã?",
    "Quem é mais provável de... desaparecer do nada e aparecer em outra festa?",
    "Quem é mais provável de... convencer todo mundo a tomar um shot?",
    "Quem é mais provável de... postar um vídeo vergonhoso no Instagram?",
    "Quem é mais provável de... casar com alguém que conheceu em um bar?",
    "Quem é mais provável de... ganhar uma competição de quem bebe mais rápido?",
    "Quem é mais provável de... esquecer onde estacionou o carro?",
    "Quem é mais provável de... ser a 'mãe/pai' do grupo e cuidar dos bêbados?",
    "Quem é mais provável de... gastar todo o dinheiro em rodadas de bebida?",
    "Quem é mais provável de... confundir o banheiro masculino com o feminino?",
    "Quem é mais provável de... tentar xavecar a pessoa errada?",
    "Quem é mais provável de... ser o último a sair do bar?",
]

export default function QuemEMaisProvavel() {
    const [currentQuestion, setCurrentQuestion] = useState("")
    const [usedIndexes, setUsedIndexes] = useState([])
    const [key, setKey] = useState(0) // Para forçar a animação

    const getNextQuestion = () => {
        let nextIndex

        if (usedIndexes.length === PERGUNTAS.length) {
            nextIndex = Math.floor(Math.random() * PERGUNTAS.length)
            setUsedIndexes([nextIndex])
        } else {
            do {
                nextIndex = Math.floor(Math.random() * PERGUNTAS.length)
            } while (usedIndexes.includes(nextIndex))
            setUsedIndexes(prev => [...prev, nextIndex])
        }

        setCurrentQuestion(PERGUNTAS[nextIndex])
        setKey(prev => prev + 1)
    }

    useEffect(() => {
        getNextQuestion()
    }, [])

    return (
        <div className={styles.page}>
            <Link to="/jogos" className={styles.backLink}>
                <i className="fas fa-arrow-left"></i> Voltar para Jogos
            </Link>

            <h1 className={styles.title}>Quem é mais provável?</h1>

            <div className={styles.container}>
                <div className={styles.icon}>
                    <i className="fas fa-users-cog"></i>
                </div>

                <div key={key} className={styles.question}>
                    {currentQuestion}
                </div>

                <button className={styles.nextBtn} onClick={getNextQuestion}>
                    PRÓXIMA PERGUNTA
                </button>
            </div>

            <div className={styles.instructions}>
                <strong>Como Jogar:</strong> <br />
                No 3... 2... 1... todos devem <strong>APONTAR</strong> para a pessoa que acham mais provável de fazer o que diz a frase!
            </div>

            <div style={{ marginTop: '20px', fontSize: '0.8rem', color: 'rgba(239, 199, 184, 0.4)', textAlign: 'center' }}>
                Apenas para diversão. Brinquem com respeito!
            </div>
        </div>
    )
}
