import React, { useState } from 'react';

// This is an implementation of the Fisher-Yates shuffle
// TODO: Understand this algorithm and credit the Stack Overflow
// post this was copied from
function shuffle(a) {
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]]
  }
  return a
}

const ProjectChooser = () => {

  const initialProjects = ['TIMER', '6502', 'CHESS', 'SUDOKU', 'CHALLENGES', 'CHOOSER'];
  
  const [projects, setProjects] = useState([]);

  return <div id='container' style={{
    boxShadow: '3px 3px',
    border: '1px solid darkgrey',
    padding: '10px',
    backgroundColor: 'white',
    textAlign: 'center'
  }}>
    <h1>Project Chooser :)</h1>
    <div id="chooseArea" style={{ margin: '20px' }}>
      <button onClick={() => setProjects([...shuffle([...initialProjects])])}
        style={{
          width: '240px',
          height: '40px',
          fontSize: '1.25em',
          border: 0,
          background: 'none',
          boxShadow: 'none',
          borderRadius: '2px',
          backgroundColor: '#007bff',
          color: 'white'
        }}>
        Choose My Project!
      </button>
    </div>
    <div >
      {projects.length > 0 ? <>
        <div id="selected"
          style={{
            textAlign: 'center',
            fontWeight: 'bold',
            border: '1px solid darkgrey',
            padding: '10px',
            fontSize: '2em',
            borderRadius: '5px'
          }}>
          {projects[0]}
        </div>
        <div style={{
          marginLeft: '25%',
          textAlign: 'left'
        }}>
          <ul>{projects.slice(1).map((p, i) => <li key={i}>{p}</li>)}</ul></div>
      </> :
        <div style={{
          marginLeft: '25%',
          textAlign: 'left'
        }}>
          <b>Projects Available</b>
          <ul>{initialProjects.map((p, i) => <li key={i}>{p}</li>)}</ul>
        </div>}
    </div>
  </div>;
}

export default ProjectChooser;
