import MonButton from "../components/chaos/monButton";
import MonInput from "../components/chaos/MonInput";
import "../components/chaos/style.css"
import { useState } from "react";


export default function ChaosPage(){

    const array_input = [1,2,3,4];
    const [array_letter,setArray_letter]=useState(["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"," ","!"]);

    const [sizeFrontw,setSizeFrontw] = useState(16)
    const [sizeFronth,setSizeFronth] = useState(10)
    const [color,setColor] = useState("#ffffff")

    function randomFront(){setSizeFronth(Math.floor(Math.random() * (1000)));
    setSizeFrontw(Math.floor(Math.random() * (1000)));
    setColor(`#${Math.floor(Math.random() * 16777215).toString(16)}`)}

    function shuffleArray(arr) {
        for (let i = arr.length - 1; i > 0; i--) {
          const j = Math.floor(Math.random() * (i + 1));  // Choisir un index aléatoire
          [arr[i], arr[j]] = [arr[j], arr[i]];  // Échanger les éléments
        }
        return arr;
      }
      
      const myArray = [1, 2, 3, 4, 5];
      const shuffledArray = shuffleArray(myArray);
      
      console.log(shuffledArray);  // Affiche un tableau mélangé
      

    const [entry1,setEntry1] = useState("champ1")
    function E1(ent:string) {
        setEntry1(entry1+ent);
    }
    const [connarddefocus,setFocus] = useState(()=>E1)

    const [entry2,setEntry2] = useState("champ2")
    function E2(ent:string) {
        setEntry2(entry2+ent);
    }
    
    function changeFocus(E) {
        setArray_letter(shuffleArray(array_letter));
        setFocus(()=>E);
    }

    
    return(
        <div>
            <h1>Chaos Page</h1>
            <MonInput text={entry1} new_focus={()=>changeFocus(E1)}/>
            <MonInput text={entry2} new_focus={()=>changeFocus(E2)}/>
            <div id = "keys">
                {array_letter.map((letter) => {return <MonButton 
                                                                letter={letter} 
                                                                changetext={connarddefocus}
                                                                sizeFrontw={sizeFrontw}
                                                                sizeFronth={sizeFronth}
                                                                rdmFront={randomFront}
                                                                color={color}/> })}
            </div>
        </div>
    )
}