import React, { FunctionComponent, useState } from 'react';
import { Page } from '../Page';
import { ClarificationSection } from './ClarificationSection';
import { OptionsSection } from './OptionsSection';
import { MetadataPanel } from './MetadataPanel';
import { AppendixPanel } from './AppendixPanel';
import { DecisionSupportFile, newDecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
import { useParams } from 'react-router';
import { useDecisions } from '../../gql/queries/decisions';

export interface DecisionSupportFilePageProps {

};

export const DecisionSupportFilePage: FunctionComponent<DecisionSupportFilePageProps> = () => {
  const { id } = useParams();
  const { decisions } = useDecisions({
    variables:{
      filter: { 
        ids: [id],
      }
    }
  });

  const [ state, setState ] = useState({ 
    dsf: decisions.length > 0 ? decisions[0] : newDecisionSupportFile(), 
    selectedTabIndex: 0 
  });
  
  const isNew = state.dsf.id === '';
  const isClosed = state.dsf.status === DecisionSupportFileStatus.Closed;

  const selectTab = (tabIndex: number) => {
    setState(state => ({ ...state, selectedTabIndex: tabIndex }));
  };

  const updateDSF = (dsf: DecisionSupportFile) => {
    setState(state => ({...state, dsf}));
  };

  console.log(state.dsf);

  return (
    <Page title="Dossier d'Aide à la Décision">
      <div className="container is-fluid">
        <section className="mt-5">
          <div className="level">
            <div className="level-left">
              {
                isNew ?
                <div className="level-item">
                  <div>
                    <h2 className="is-size-3 title is-spaced">Nouveau</h2>
                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision</h3>
                  </div>
                </div> :
                <div className="level-item">
                  <div>
                    <h2 className="is-size-3 title is-spaced">{state.dsf.title}</h2>
                    <h3 className="is-size-5 subtitle">Dossier d'Aide à la Décision <span className="is-italic">{ isClosed ? '(clos)' : null }</span></h3>
                  </div>
                </div>
              }
            </div>
          </div>
        </section>
        <div className="columns mt-3">
          <div className="column is-9">
            <div className="tabs is-medium is-toggle">
              <ul>
                <li className={`has-background-white ${state.selectedTabIndex === 0 ? 'is-active': ''}`}
                  onClick={selectTab.bind(null, 0)}>
                  <a>
                    <span className="icon is-small"><i className="fas fa-pen" aria-hidden="true"></i></span>
                    <span>Clarifier la proposition</span>
                  </a>
                </li>
                <li className={`has-background-white ${state.selectedTabIndex === 1 ? 'is-active': ''}`} 
                    onClick={selectTab.bind(null, 1)}>
                  <a>
                    <span className="icon is-small"><i className="fas fa-search" aria-hidden="true"></i></span>
                    <span>Explorer les options</span>
                  </a>
                </li>
                <li className={`has-background-white ${state.selectedTabIndex === 2 ? 'is-active': ''}`} 
                    onClick={selectTab.bind(null, 2)}>
                  <a>
                    <span className="icon is-small"><i className="fas fa-person-booth" aria-hidden="true"></i></span>
                    <span>Prendre la décision</span>
                  </a>
                </li>
              </ul>
            </div>
            {
              state.selectedTabIndex === 0 ?
              <ClarificationSection dsf={state.dsf} updateDSF={updateDSF} /> :
              null
            }
          </div>
          <div className="column is-3">
            <MetadataPanel dsf={state.dsf} />
            <AppendixPanel dsf={state.dsf} />
          </div>
        </div>
      </div>
    </Page>
  );
};