import { FunctionalComponent, h } from "preact";
import style from "./style.module.css";
import { newProject, Project } from "../../models/project";
import { getProjectStorageKey } from "../../util/storage";
import { useLocalStorage } from "../../hooks/use-local-storage";
import TaskTable from "../project/tasks-table";
import { useProjectReducer, addTask, updateTaskEstimation, removeTask, updateTaskLabel } from "../../hooks/use-project-reducer";
import { Task, TaskID, EstimationConfidence } from "../../models/task";
import TimePreview from "../project/time-preview";
import RepartitionPreview from "../project/repartition-preview";
import FinancialPreview from "../project/financial-preview";
import { getHideFinancialPreviewOnPrint } from "../../models/params";

export interface PdfProps {
    projectId: string
}

const Pdf: FunctionalComponent<PdfProps> = ({ projectId }) => {
    const projectStorageKey = getProjectStorageKey(projectId);
    const [ storedProject, storeProject ] = useLocalStorage(projectStorageKey, newProject(projectId));
    const [ project, dispatch ] = useProjectReducer(storedProject);

    return (
        <div class={`container ${style.pdf}`}>
            <div class="columns">
                <div class="column is-9">
                    <TaskTable 
                    project={project} 
                    readonly={true} />
                </div>
                <div class="column is-3">
                    <TimePreview project={project} />
                    <RepartitionPreview project={project} />
                </div>
            </div>
            <div class="columns">
                <div class={`column ${getHideFinancialPreviewOnPrint(project) ? 'noPrint': ''}`}>
                    <FinancialPreview project={project} />
                </div>
            </div>
        </div>
    );
};

export default Pdf;