import React, { FunctionComponent } from 'react';
import { Link } from 'react-router-dom';
import { useDecisionSupportFiles } from '../../gql/queries/dsf';
import { DecisionSupportFile } from '../../types/decision';
import { User } from '../../types/user';
import { DecisionSupportFileLink } from '../DecisionSupportFileLink';
import { WorkgroupLink } from '../WorkgroupLink';

export interface DecisionSupportFilePanelProps {
  workgroupId: string
}

export const DecisionSupportFilePanel: FunctionComponent<DecisionSupportFilePanelProps> = ({ workgroupId }) => {
  const { decisionSupportFiles } = useDecisionSupportFiles({
    variables: {
      filter: {
        workgroups: [workgroupId],
      }
    }
  })
  
  return (
    <nav className="panel">
      <p className="panel-heading">
        Dossiers d'aide à la décision
      </p>
      {
        decisionSupportFiles.map((dsf: DecisionSupportFile) => {
          return (
            <Link to={`/decisions/${dsf.id}`} key={`dsf-${dsf.id}`} className="panel-block">
              <span className="panel-icon">
                <i className="fas fa-file" aria-hidden="true"></i>
              </span>
              <span>{dsf.title}</span>
            </Link>
          );
        })
      }
      {
        decisionSupportFiles.length === 0 ?
        <a className="panel-block has-text-centered is-block">
          <p className="is-italic">Aucun dossier pour l'instant.</p>
        </a> :
        null
      }
    </nav>
  );
}