import { FunctionalComponent, h, Fragment } from "preact";
import { Project } from "../../models/project";
import { useProjectEstimations, Estimation } from "../../hooks/use-project-estimations";
import EstimationRange from "../../components/estimation-range";

export interface TimePreviewProps {
    project: Project
}

const TimePreview: FunctionalComponent<TimePreviewProps> = ({ project }) => {
    const estimations = useProjectEstimations(project);
    return (
        <div class="table-container">
            <table class="table is-bordered is-striped is-fullwidth">
                <thead>
                    <tr>
                        <th colSpan={2}>Prévisionnel temps</th>
                    </tr>
                    <tr>
                        <th class="is-narrow">Confiance</th>
                        <th>Estimation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="is-narrow">>= 99.7%</td>
                        <td><EstimationRange project={project} estimation={estimations.p99} sdFactor={3} /></td>
                    </tr>
                    <tr>
                        <td class="is-narrow">>= 90%</td>
                        <td><EstimationRange project={project} estimation={estimations.p90} sdFactor={1.645} /></td>
                    </tr>
                    <tr>
                        <td class="is-narrow">>= 68%</td>
                        <td><EstimationRange project={project} estimation={estimations.p68} sdFactor={1} /></td>
                    </tr>
                </tbody>
                <tfoot class="noPrint">
                    <tr>
                        <td colSpan={2}>
                            <a class="is-small is-pulled-right" href="https://en.wikipedia.org/wiki/Three-point_estimation" target="_blank">❓ Estimation à 3 points</a>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    );
}; 

export default TimePreview;
