import React, { FunctionComponent, useState } from 'react';
import { DecisionSupportFile } from '../../types/decision';
import { Timeline } from '../Timeline';
import { useEvents } from '../../gql/queries/event';
import { Workgroup } from '../../types/workgroup';

export interface TimelinePanelProps {
  workgroup: Workgroup,
};

export const TimelinePanel: FunctionComponent<TimelinePanelProps> = ({ workgroup }) => {
  const { events } = useEvents({
    variables: {
      filter: {
        objectType: 'workgroup',
        objectId: workgroup.id
      }
    }
  });

  return (
    <div className="panel">
      <p className="level panel-heading mb-0">
        <div className="level-left">
          <div className="level-item">
          Suivi des opérations
          </div>
        </div>
        <div className="level-right">
        </div>
      </p>
      <div className="panel-block">
        <Timeline events={events} />
      </div>
    </div>
  );
};