import React, { FunctionComponent } from "react";
import style from "./style.module.css";
import { useHistory } from 'react-router';
import { base58UUID } from '../../util/uuid';
import { useStoredProjectList } from "../../hooks/use-stored-project-list";

const Home: FunctionComponent = () => {
    const [ projects, refreshProjects ] = useStoredProjectList();
    const history = useHistory();

    const openNewProject = () => {
        const uuid = base58UUID();
        history.push(`/p/${uuid}`);
    };

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

export default Home;