import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import { BsGearFill } from 'react-icons/bs'
import { MdOutlineLeaderboard } from 'react-icons/md'

const API_URL = "https://raw.githubusercontent.com/xangregg/deepwordle/main/common.txt"

function App() {
  const [answer, setAnswer] = useState('');
  const [guesses, setGuesses] = useState(Array(6).fill(null));
  const [currentGuess, setCurrentGuess] = useState('');
  const [gameOver, setGameOver] = useState(false);

  useEffect( () => {
    async function go_fetch() {
      const response = await fetch(API_URL);
      const data = await response.text();
      var cells = data.split('\n').map(function (el) { return el.split(/\s+/); });
      setAnswer(cells[Math.floor(Math.random()*cells.length)][0]);
    }
    go_fetch();

  }, [])

  useEffect( () => {
    let fired = false;
    // DIFFERENCE BETWEEN CONST AND FUNCTION?
    const handleType = (event) => {
      if (gameOver) {
        console.log("GAME OVER")
        return;
      }
      console.log(event.key)
      if (event.key === 'Enter'){
        if (currentGuess.length === 5) {
          if(currentGuess === answer || guesses.findIndex(x => x===null) === -1){
            setGameOver(true);
          }
          // const tmp = guesses;
          const tmp = [...guesses];
          tmp[guesses.findIndex(x => x==null)] = currentGuess;
          setGuesses(tmp);
          setCurrentGuess('');
        }
        return;
      }
      if (event.key === 'Backspace') {
        setCurrentGuess(currentGuess.slice(0,-1));
        return;
      }

      if (event.keyCode >= 65 && event.keyCode <= 90 && currentGuess.length<5) {
        setCurrentGuess(oldGuess => oldGuess + event.key)
        console.log(currentGuess, currentGuess.length)
        return;
      }
      return;
    }
    window.addEventListener('keyup', handleType)

    return () => {
      window.removeEventListener('keyup', handleType)
    }
  }, [currentGuess, guesses, gameOver, answer]);


  return (
    <div className="App">
      <Navbar/>
      {
        guesses.map((guess, i) => {
          const isCurrentGuess = i === guesses.findIndex( x => x==null)
          const isTmp = i >= guesses.findIndex( x=> x===null) && guesses.findIndex(x=>x===null) !== -1
          return <Line key={i} guess={isCurrentGuess?currentGuess:(guess ?? '')}  answer={answer} isFinal={!isTmp}/>
        })
        // means passes empty string if null
      }
    </div>
  );
}

function Navbar() {
  return <div>
    <div className='navbar'>
      <div className='center-nav'>
        Wordle
      </div>
      <ul>
        <li className='rIcons'><BsGearFill/></li>
        <li className='rIcons'><MdOutlineLeaderboard/></li>
      </ul>
    </div>
    <hr></hr>
  </div>
}

function Line({guess, answer, isFinal}) {
  let tiles = [];
  for(let i=0;i<5;i++){
    let cl_name="tile";
    if (isFinal) {
      if(guess[i] === answer[i]){
        cl_name = "tile correct"
      }
      else if(answer.includes(guess[i])){
        cl_name = "tile almost"
      }
      else {
        cl_name = "tile incorrect"
      }
    }
    tiles.push(<div key={i} className={cl_name}>
      {guess[i]}
    </div>)
  }
  return <div className="line">
    {tiles}
  </div>
}

export default App;


import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


.App {
  text-align: center;
  vertical-align: center;
  /* height: 50px */
}

.navbar {
  display: inline-flex;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  vertical-align: middle;
  font-weight: bold;
  font-size:xx-large;
}

ul {
  margin: 0;
  float: right;
  list-style-type: none;
  text-align: center;
  vertical-align: middle;
}

li {
  vertical-align: middle;
}

.center-nav {
}

.rIcons {
  float:right;
}

.line {
  /* height: 50px; */
  display: flex;
  vertical-align: center;
  align-items: center;
  align-content: center;
  margin:auto;
  justify-content: center;
}

.tile {

  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  height: 50px;
  width: 50px;
  margin: 5px;
  border: 2px solid lightgray;
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  text-transform: capitalize;
  vertical-align: middle;
  line-height: 50px;
}

.correct{
  background-color: lightgreen;
}

.almost{
  background-color: yellow;
}

.incorrect{
  background-color: rgb(243, 236, 236);
}