import React, {  } from 'react';
import { Workgroup, inWorkgroup } from '../../types/workgroup';
import { useWorkgroups } from '../../gql/queries/workgroups';
import { useUserProfile } from '../../gql/queries/profile';
import { ItemPanel, Item } from '../ItemPanel';

export function WorkgroupsPanel() {
  const { workgroups } = useWorkgroups();
  const  { user } = useUserProfile();

  const tabs = [
    {
      label: "Mes groupes en cours",
      itemFilter: (item: Item) => {
        const wg = item as Workgroup;
        return  wg.closedAt === null && inWorkgroup(user, wg);
      }
    },
    {
      label: "Ouverts",
      itemFilter: (item: Item) => !(item as Workgroup).closedAt
    },
    {
      label: "Clos",
      itemFilter: (item: Item) => !!(item as Workgroup).closedAt
    }
  ];
  
  return (
    <ItemPanel
      className='is-info'
      title="Groupes de travail"
      newItemUrl="/workgroups/new"
      items={workgroups}
      tabs={tabs}
      itemIconClassName='fas fa-users'
      itemKey={item => item.id}
      itemLabel={item => item.name}
      itemUrl={item => `/workgroups/${item.id}`}
    />
  );
}