import React, { FunctionComponent } from "react";
import { Project, getTaskCategoriesMeanRepartition } from "../../types/project";

export interface RepartitionPreviewProps {
  project: Project
}

const RepartitionPreview: FunctionComponent<RepartitionPreviewProps> = ({ project }) => {
  const repartition = getTaskCategoriesMeanRepartition(project);   
  return (
    <div className="table-container">
      <table className="table is-bordered is-striped is-fullwidth">
        <thead>
          <tr>
            <th colSpan={2}>Répartition moyenne</th>
          </tr>
          <tr>
            <th>Catégorie</th>
            <th>Temps (en %)</th>
          </tr>
        </thead>
        <tbody>
          {
            Object.values(project.params.taskCategories).map(tc => {
              let percent = (repartition[tc.id] * 100).toFixed(0);
              return (
                <tr key={`task-category-${tc.id}`}>
                  <td>{tc.label}</td>
                  <td>{percent} %</td>
                </tr>
              );
            })
          }
        </tbody>
      </table>
    </div>
  );
};

export default RepartitionPreview;
