import React, { useState } from 'react';
import Login from './components/Login/Login';
import './App.css';
import useToken from './useToken';
import CardList from "./components/Cards/CardList";

function App() {
    const { token, setToken } = useToken();
    const [ filter, setFilter ] = useState('all');

    if(!token) {
        return <Login setToken={setToken} />
    }

    function handleChange(e: { target: { value: React.SetStateAction<string>; }; }){
        setFilter(e.target.value);
    }

    return (
        <div className="wrapper">
            <div className="topContainer">
                <select id="filter" onChange={handleChange}>
                    <option value="all">All</option>
                    <option value="event">Event</option>
                    <option value="special">Special</option>
                    <option value="black">Black</option>
                    <option value="red">Red</option>
                    <option value="blue">Blue</option>
                    <option value="yellow">Yellow</option>
                    <option value="green">Green</option>
                </select>
                <h1>Cards</h1>
            </div>
            <div className="CardList">
                <CardList filter={filter} />
            </div>
            <footer>
                <p>The card game Frantic, the associated logo and game assets are under copyright by the original creators Rulefactory.</p>
            </footer>
        </div>
    );
}

export default App;
