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

export interface TimelinePanelProps {
  dsf: DecisionSupportFile,
};

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

  return (
    <div className="panel">
      <div 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>
      </div>
      <div className="panel-block">
        <Timeline events={events} />
      </div>
    </div>
  );
};