import React from 'react';
import { DecisionSupportFile, DecisionSupportFileStatus } from '../../types/decision';
import { ItemPanel, TabDefinition, Item } from './ItemPanel';
import { useUserProfile } from '../../gql/queries/profile';
import { inWorkgroup } from '../../types/workgroup';
import { useDecisionSupportFiles } from '../../gql/queries/dsf';

export function DecisionSupportFilePanel() {
  const { user } = useUserProfile();
  const { decisionSupportFiles } = useDecisionSupportFiles();

  const tabs: TabDefinition[] = [
    {
      label: 'Mes dossiers en cours',
      itemFilter: (item: Item) => {
        const dsf = item as DecisionSupportFile;
        return (dsf.status === DecisionSupportFileStatus.Draft || dsf.status === DecisionSupportFileStatus.Ready) && inWorkgroup(user, dsf.workgroup);
      }
    },
    {
      label: 'Brouillons',
      itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Draft
    },
    {
      label: 'Clos',
      itemFilter: (item: Item) => (item as DecisionSupportFile).status === DecisionSupportFileStatus.Closed
    },
  ];
  
  return (
    <ItemPanel
      className='is-link'
      title="Dossiers"
      newItemUrl="/decisions/new"
      items={decisionSupportFiles}
      tabs={tabs}
      itemIconClassName='fas fa-folder'
      itemKey={item => item.id}
      itemLabel={item => item.title}
      itemUrl={item => `/decisions/${item.id}`}
    />
  );
}