import { FunctionalComponent, h } from "preact";
import { useReducer } from "preact/hooks";
import * as style from "./style.css";
import { newProject } from "../../models/project";
import TaskTable from "./tasks-table";
import TimePreview from "./time-preview";
import FinancialPreview from "./financial-preview";
import { projectReducer, addTask, updateTaskEstimation, removeTask } from "../../hooks/project-reducer";
import { Task, TaskID, EstimationConfidence } from "../../models/task";

const Project: FunctionalComponent = () => {
    const [project, dispatch] = useReducer(projectReducer, newProject());

    const onTaskAdd = (task: Task) => {
        dispatch(addTask(task));
    };

    const onTaskRemove = (taskId: TaskID) => {
        dispatch(removeTask(taskId));
    }

    const onEstimationChange = (taskId: TaskID, confidence: EstimationConfidence, value: number) => {
        dispatch(updateTaskEstimation(taskId, confidence, value));
    };

    return (
        <div class={`container ${style.estimation}`}>
            <div class="tabs">
                <ul>
                    <li class="is-active">
                        <a>
                            <span class="icon is-small">📋</span>
                            Estimation
                        </a>
                    </li>
                    {/* <li>
                        <a disabled>
                            <span class="icon is-small">⚙️</span>
                            Paramètres
                        </a>
                    </li> */}
                </ul>
            </div>
            <div class="columns">
                <div class="column is-9">
                    <TaskTable 
                        project={project} 
                        onTaskAdd={onTaskAdd}
                        onTaskRemove={onTaskRemove}
                        onEstimationChange={onEstimationChange} />    
                </div>
                <div class="column is-3">
                    <TimePreview project={project} />
                    <FinancialPreview project={project} />
                </div>
            </div>
        </div>
    );
};

export default Project;