import React, { FunctionComponent } from "react";
import { Project } from "../../types/project";
import { useProjectEstimations } from "../../hooks/useProjectEstimations";
import EstimationRange from "../EstimationRange";

export interface TimePreviewProps {
  project: Project
}

export const TimePreview: FunctionComponent<TimePreviewProps> = ({ project }) => {
    const estimations = useProjectEstimations(project);
    return (
      <div className="table-container">
        <table className="table is-bordered is-striped is-fullwidth">
          <thead>
            <tr>
              <th colSpan={2}>Prévisionnel temps</th>
            </tr>
            <tr>
              <th className="is-narrow">Confiance</th>
              <th>Estimation</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="is-narrow">&gt;= 99.7%</td>
              <td><EstimationRange project={project} estimation={estimations.p99} /></td>
            </tr>
            <tr>
              <td className="is-narrow">&gt;= 90%</td>
              <td><EstimationRange project={project} estimation={estimations.p90} /></td>
            </tr>
            <tr>
              <td className="is-narrow">&gt;= 68%</td>
              <td><EstimationRange project={project} estimation={estimations.p68} /></td>
            </tr>
          </tbody>
          <tfoot className="noPrint">
            <tr>
              <td colSpan={2}>
                <a className="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>
    );
};