]

import data from '../public/data.json';
import 'tailwindcss/tailwind.css'
import { useState } from 'react';

//@TODO: Fazer um menu com:
// About
// Instruções
// Jogos passados

function NavCard(props) {
    var style;
    if (props.current == true) {
        style = 'text-gray-300 bg-gray-900 px-3 py-2 rounded-md text-sm font-medium" aria-current="page"';
    } else {
        style = 'text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium';
    }

    return (
        <a href={props.href} className={style}>{props.name}</a>
    )
}

export function NavBar(props) {
    return (
        <div className="">
            <div className="flex space-x-4">
                {
                    props.cards.map((card, idx) => (
                        <NavCard name={card[0]} href={card[1]} current={card[0] == props.current} />
                    ))
                }
            </div>
        </div>
    )
}

NavBar.defaultProps = {
    cards: [['Jogos', '/'], ['Sobre', '/about'], ['Instruções', '/instructions']],
}

function GameCard(props) {
    var web;
    if (JSON.parse(props.game.web) == true) {
        web =
            <div className="text-base text-gray-50 bg-indigo-600 rounded-xl uppercase font-bold">
                <div className="m-1">
                    web
                </div>
            </div>;
    } else {
        web = <div></div>
    }
    return (

        <div className=" rounded-x1 shadow-md max-w-md mx-auto rounded-3xl shadow-md overflow-hidden bg-gray-50">
            <div className="p-8">
                <div className="flex space-x-20">
                    <div className="text-base text-indigo-600 font-semibold tracking-wide uppercase">
                        {props.game.class}
                    </div>
                    {web}
                </div>
                <a href={props.game.link} className="block mt-1 text-lg leading-tight font-semibold text-black hover:underline">
                    {props.game.name}
                </a>
                <div className="mt-2  text-gray-500">
                    Autores: {props.game.team}
                </div>
        <Expand>Oi seu curioso saphado</Expand>
            </div>
        </div>
    )
}

function Footer(propos) {
    return (
        <div className="text-white bg-gray-800">
            Hellow world
        </div>
    )
}

function Expand(props) {
    const [isVisible, setisVisible] = useState(false);
    let children = props.children.substr(0, 5) + "...";
    return (
    <div className=""> 
        <div className="flex">
            <div className={`${ !isVisible ? "" : "hidden" }`}> {children} </div>
            <div className={`${ isVisible ? "" : "" } cursor-pointer hover:underline`} onClick={() => setisVisible(!isVisible)}> {isVisible ? "(Ler menos)" : "(Ler mais)"} </div>
        </div>
        <div className={`${ isVisible ? "" : "hidden" }`}> {props.children} </div>
    </div>
    )
}

function Home() {
    return (

        <div className="space-y-5 bg-gray-800 min-h-screen">
            <NavBar current='Jogos' />
            <div>_</div>
            <div className="text-center mt-8 mb-8 text-3xl leading-8 font-extrabold tracking-tight text-yellow-400">Jogos</div>
            {
                data.games.map((game) => (
                    <GameCard game={game} />
                ))
            }
        <Footer/>
        </div >
    )
}

export default Home;