import React, { FunctionComponent, useEffect } from "react";
import style from "./style.module.css";
import { newProject, Project } from "../../types/project";
import { useProjectReducer, updateProjectLabel } from "../../hooks/useProjectReducer";
import EditableText from "../EditableText/EditableText";
import Tabs from "../../components/Tabs/Tabs";
import EstimationTab from "./EstimationTab";
import ParamsTab from "./ParamsTab";
import ExportTab from "./ExportTab";
import { useParams } from "react-router";
import { Page } from "../Page";

export interface ProjectProps {
  projectId: string
}

export const ProjectPage: FunctionComponent<ProjectProps> = () => {
  const { id } = useParams();
  const [ project, dispatch ] = useProjectReducer(newProject());
  
  const onProjectLabelChange = (projectLabel: string) => {
    dispatch(updateProjectLabel(projectLabel));
  };
  
  return (
    <Page title="Projet">
      <div className="container is-fluid">
        <div className="columns">
          <div className="column mt-3 is-10">
            <EditableText
              editIconClass="is-size-4"
              render={(value) => (<h2 className="is-size-3">{value}</h2>)}
              onChange={onProjectLabelChange}
              value={project.label ? project.label : "Projet sans nom"} 
            />
            <div className={`box mt-3 ${style.tabContainer}`}>
              <Tabs items={[
                {
                  label: 'Estimation',
                  icon: 'fa fa-clipboard',
                  render: () => <EstimationTab project={project} dispatch={dispatch} />
                },
                {
                  label: 'Options avancées',
                  icon: 'fa fa-sliders-h',
                  render: () => <ParamsTab project={project} dispatch={dispatch} />
                },
                {
                  label: 'Exporter',
                  icon: 'fa fa-file-export',
                  render: () => <ExportTab project={project} />
                }
              ]} />
            </div>
          </div>
        </div>
      </div>
    </Page>
  );
};