import './App.css'
import {createSignal} from "solid-js";
import {getmisskeycolors} from "./helpers.ts";

function App() {
    const [count, setCount] = createSignal(2);
    const [message, setMessage] = createSignal("not valid colors");


    return (
        <>
            <div class="App relative flex min-h-screen flex-col justify-center overflow-hidden ">
                <div class="mb-10">
                    <div class="flex items-center space-x-2 mb-2">
                        <span class="text-pink-500">number of colors: </span>
                        <input
                            type="number"
                            class="border border-gray-300 rounded p-2"
                            value={count()}
                            onInput={(e) => setCount(Number(e.target.value))}
                            min="2"
                        />
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="text-pink-500">text: </span>
                        <input
                            type="text"
                            class="border border-gray-300 rounded p-2"
                            id="ubuntucola"
                            onInput={(e) => setCount(Number(e.target.value))}
                            min="2"
                        />
                    </div>
                </div>
                <div class="mt-4">
                    {Array.from({length: count()}, (_, i) => (
                        <div
                            // @ts-ignore
                            key={i}
                            class="m-2"
                        >
                            <div class="flex items-center space-x-2">
                                <span class="text-pink-500">color:</span>
                                <input
                                    type="color"
                                    id={`color_${i}`}
                                    class="border border-gray-300 rounded p-2"

                                />
                            </div>
                        </div>
                    ))}
                </div>
                <div>
                    <button class="border-pink-300" onclick={()=>{
                        let colors = []
                        for (let i = 0; i < count(); i++) {
                            // @ts-ignore
                            colors.push(document.getElementById(`color_${i}`).value);
                        }
                        // @ts-ignore
                        let message = document.getElementById("ubuntucola").value as string
                        setMessage(getmisskeycolors(message, colors));
                    }}>
                        generate!
                    </button>
                </div>
                <span>{message()}</span>
            </div>
        </>
    )
}

export default App