import { FunctionalComponent, h } from "preact";
import style from "./style.module.css";
import { route } from 'preact-router';
import { base58UUID } from '../../util/uuid';
import { useStoredProjectList } from "../../hooks/use-stored-project-list";

const Home: FunctionalComponent = () => {
    const [ projects, refreshProjects ] = useStoredProjectList();

    const openNewProject = () => {
        const uuid = base58UUID();
        route(`/p/${uuid}`);
    };

    return (
        <div class={`container ${style.home}`}>
            <div class="columns">
                <div class="column">
                    <div class="buttons is-right">
                        <button class="button is-primary"
                            onClick={openNewProject}>
                            <strong>+</strong>&nbsp;&nbsp;Nouveau projet
                        </button>
                    </div>
                    <div class="panel">
                        <p class="panel-heading">
                            Mes projets
                        </p>
                        {/* <div class="panel-block">
                            <p class="control has-icons-left">
                                <input class="input" type="text" placeholder="Search" />
                                <span class="icon is-left">🔍</span>
                            </p>
                        </div> */}
                        {
                            projects.map(p => (
                                <a class="panel-block" href={`/p/${p.id}`}>
                                    <span class="panel-icon">🗒️</span>
                                    { p.label ? p.label : "Projet sans nom" }
                                </a>
                            ))
                        }
                        {
                            projects.length === 0 ?
                            <p class="panel-block">
                                <div class={style.noProjects}>Aucun project pour l'instant.</div>
                            </p> :
                            null
                        }
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;