import React, { useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import Stat from "./Components/Stat";
import Trait from "./Components/Trait";

function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  const [race, setRace] = useState("");
  const [newStat, setNewStat] = useState("");
  const [stats, setStats] = useState([
    /*{ statsName: "Strength", statsValue: 20 },
    { statsName: "Agility", statsValue: 5 },
    { statsName: "Stamina", statsValue: 10 }*/
  ]);

  function randomStatValue() {
    return Math.floor(Math.random() * 20 + 1);
  }

  const [newTrait, setNewTrait] = useState("");
  const [traits, setTraits] = useState([]);

  const character = {
    name: name,
    age: age,
    race: race,
    traits: traits,
    stats: stats
  };

  const handleClick = () => {
    setName("");
    setAge(0);
    setNewStat([]);
    setRace("");
  };

  const addTrait = () => {
    traits.push(newTrait);
    setTraits(traits);
    setNewTrait("");
  };

  const removeTrait = index => {
    const updatedTrait = traits.splice(0);
    updatedTrait.splice(index, 1);
    setTraits(updatedTrait);
  };

  const addStat = () => {
    const newStatObject = {
      statsName: newStat,
      statsValue: randomStatValue()
    };

    stats.push(newStatObject);
    setStats(stats);
    setNewStat("");
  };
  //Remove single stat
  const removeStat = index => {
    console.log("removeStat clicked, " + index);
    const updatedStat = stats.splice(0);
    updatedStat.splice(index, 1);
    setStats(updatedStat);
  };

  const handleChange = event => {
    setName(event.target.value);
    /*
    if (event.target.value.length >= 3) {
      setName("Yes");
    } */
  };

  const handleRaceChange = event => {
    setRace(event.target.value);
  };

  const handleNewStatChange = event => {
    setNewStat(event.target.value);
  };

  const handleNewTraitChange = event => {
    setNewTrait(event.target.value);
  };

  const handleAgeChange = event => {
    if (!isNaN(event.target.value)) {
      setAge(event.target.value);
    }
  };

  return (
    <div className="App">
      <h1>DnD Character Creator</h1>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Character Name"
      />
      <input
        type="number"
        value={age}
        onChange={handleAgeChange}
        placeholder="Character Age"
      />
      <input
        type="text"
        value={race}
        onChange={handleRaceChange}
        placeholder="Character Race"
      />
      <input
        type="text"
        value={newTrait}
        onChange={handleNewTraitChange}
        placeholder="New Trait"
      />
      <button onClick={addTrait}>Add Trait</button>
      <input
        type="text"
        value={newStat}
        onChange={handleNewStatChange}
        placeholder="New Stat"
      />
      <button onClick={addStat}>Add Stat</button>
      <p>
        <strong>Name: </strong>
        {character.name}
        <br></br> <strong>Age: </strong>
        {character.age} <br></br>
        <strong>Race: </strong>
        {character.race}
      </p>
      <h2> Traits </h2>
      <ul>
        {character.traits.map((trait, key) => {
          return (
            <Trait
              key={key}
              trait={trait}
              removeFunction={removeTrait}
              index={key}
            />
          );
        })}
      </ul>
      <h2>Stats</h2>
      <ul>
        {/* Använder map-metoden för att skriva ut en Stat komponent för varje Stat i Stats-arrayen */}
        {character.stats.map((stat, key) => {
          return (
            <Stat
              key={key}
              stat={stat}
              removeFunction={removeStat}
              index={key}
            />
          );
        })}
      </ul>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
}

export default App;