var Utilities = (function (array, maxN) {

  function generateRandomNumber(array, maxN) {
        let randomN = Math.floor(Math.random() * maxN) + 0;
        console.log(array.length);
        console.log(maxN);

    if(array.length == maxN) {
        array.length = 0;
    }

    if(!array.includes(randomN)) {
        array.push(randomN);
    }
    else {
        randomN = generateRandomNumber(array, maxN);
    }
    return randomN;
}

return {
    generateRandomNumber: generateRandomNumber
};


})();

export default Utilities;

var cityArray = [];

function getRandomNumber() {
    let randomN = Utilities.generateRandomNumber(cityArray, 10);
    return randomN;
}

class App extends Component {
    constructor(props) {
        super(props);

        this.maxImgArray = [];
        this.array = [];
        this.maxImg = 10;

        this.state = {
            visibility: {
                form: true,
                categories: false,
                grid: false,
                timeUp: false,
                city: false
            },
            data: "",
            points: 0,
            h1: false,
            bgColor: "",
            catBgColor: "",
            bgImg: "",
            finalPlay: {
                correct: false,
                incorrect: false
            },
            countVisibility: false,
            soundOn: false,
            correct: false,
            incorrect: false,
            correctCity: false,
            candidate: '',
            question: ''
        }
    }

   ...

    // getRandomQuestion = () => {
    //  let randomN = Utilities.generateRandomNumber(this.array, 110);
    //  return randomN;
    // }

    getNewQuestion = () => {
        var randomN = getRandomNumber();
        var catArray = this.state.data.data.questions;
        Shuffle(catArray);
        this.setState({
            question: catArray[randomN]
        })
        this.setCatBgColor(catArray[randomN].category);
    }

    setCatBgColor = (cat) => {
        switch (cat) {
            case "Banking & Finance":
                this.setState({
                    catBgColor: 'n-0'
                })
                break;

            case "Entrepreneurship":
                this.setState({
                    catBgColor: 'n-1'
                })
                break;

            case "Ideas, big & small":
                this.setState({
                    catBgColor: 'n-2'
                })
                break;

            case "Analytical thinking":
                this.setState({
                    catBgColor: 'n-3'
                })
                break;

            case "Emotional Intelligence":
                this.setState({
                    catBgColor: 'n-4'
                })
                break;
        }
    }

    setHeaderVisible = (val) => {
        this.setState({
            h1: val
        })
    }

    setVisibility = (form, categories, grid, timeUp, city) => {
        this.setState({
            visibility: {
                form,
                categories,
                grid,
                timeUp,
                city
            }
        })
    }

    componentDidMount() {
        let rN = getRandomNumber();
        axios.get('/get-questions')
            .then(r => {
                this.setState({
                    data: r,
                    question: r.data.questions[rN]
                })
            });
        this.setBgImg();
    }

    render () {
        let currentState = this.state,
            form,
            cat,
            grid,
            timeUp,
            incorrect,
            correct,
            isH1Visible = currentState.h1 ? "hide" : "";

        if(currentState.visibility.form) {
            form =  <Form
                        visibility = { currentState.visibility.form }
                        setVisibility = { this.setVisibility }
                        setCandidate = { this.setCandidate }
                    />
        }

        if(currentState.visibility.categories) {
            cat =   <Categories
                        visibility = { currentState.visibility.categories }
                        setVisibility = { this.setVisibility }
                        setHeaderVisible = { this.setHeaderVisible }
                        current = { currentState.data }
                        setBgColor = { this.setBgColor }
                        setSoundOn = { this.setPlaySoundState }
                        setCatBgColor = { this.setCatBgColor }
                        question = { this.state.question } />
        }

        if(currentState.visibility.grid) {
            grid =  <Grid
                        visibility = { currentState.visibility.grid }
                        visibilityCustomCity = { currentState.visibility.city }
                        current = { currentState.data }
                        points = { currentState.points }
                        catBgColor = { currentState.catBgColor }
                        bgImg = { currentState.bgImg }
                        question = { currentState.question }
                        setFinalPlay = { this.setFinalPlay }
                        setBgColor = { this.setBgColor }
                        setCountVisibility = { this.setCountVisibility }
                        setSoundOn = { this.setPlaySoundState }
                        setIncorrectOn = { this.setIncorrectOn }
                        setCorrectOn = { this.setCorrectOn }
                        getNewQuestion = { this.getNewQuestion }
                        addPoints = { this.addPoints }
                        setCatBgColor = { this.setCatBgColor }
                        setVisibility = { this.setVisibility }
                        setCorrectCitySoundOn = { this.setCorrectCity }
                    />
        }

        if(currentState.visibility.timeUp) {
            timeUp =    <TimeUp
                            visibility = { currentState.visibility.timeUp }
                            setVisibility = { this.setVisibility }
                            setCountVisibility = { this.setCountVisibility }
                        />
        }

        if(currentState.finalPlay.correct) {
            correct =   <Correct
                            setBgImg = { this.setBgImg}
                            setCandidate = { this.setCandidate}
                            candidate = { this.state.candidate}
                            setBgColor = { this.setBgColor}
                            resetPoints = { this.resetPoints}
                            setHeaderVisible = { this.setHeaderVisible}
                            points = { currentState.points}
                            setFinalPlay = { this.setFinalPlay}
                            setVisibility = { this.setVisibility}
                            setCorrectCitySoundOn = { this.setCorrectCity }  />
        }

        if(currentState.finalPlay.incorrect) {
            incorrect = <Incorrect
                            setBgImg = { this.setBgImg}
                            setCandidate = { this.setCandidate}
                            candidate = { this.state.candidate}
                            setBgColor = { this.setBgColor}
                            resetPoints = { this.resetPoints}
                            setHeaderVisible = { this.setHeaderVisible}
                            points = { currentState.points}
                            setFinalPlay = { this.setFinalPlay}
                            setVisibility = { this.setVisibility}
                            setCorrectCitySoundOn = { this.setCorrectCity }  />
        }

        return (
            <div className = { "wrapper " + currentState.bgColor}>
                <div className="wrapper-inner">
                    <CustomSound soundOn = { this.state.soundOn} />
                    <CorrectSound soundOn = { this.state.correct} />
                    <IncorrectSound soundOn = { this.state.incorrect} />
                    <CorrectCitySound soundOn = { this.state.correctCity} />
                    <h1 className = { isH1Visible}><span>the big</span> reveal</h1>
                    {form}
                    {cat}
                    {grid}
                    {timeUp}
                    {correct}
                    {incorrect}
                </div>
            </div>
        )
    }
}

export default App;

ReactDOM.render(<App />, document.getElementById('app'));

var cityArray = [];

function getRandomNumber() {
    let randomN = Utilities.generateRandomNumber(cityArray, 10);
    return randomN;
}

getNewQuestion = () => {
    var randomN = getRandomNumber();
    var catArray = this.state.data.data.questions;
    Shuffle(catArray);
    this.setState({
        question: catArray[randomN]
    })
    this.setCatBgColor(catArray[randomN].category);
}