import React from 'react';
import { WorkgroupsPanel } from './WorkgroupsPanel';
import { DecisionSupportFilePanel } from './DecisionSupportFilePanel';
import { Timeline } from '../Timeline';
import { useEvents } from '../../gql/queries/event';

const from = new Date();
from.setDate(from.getDate() - 7);

export function Dashboard() {
  const { events } = useEvents({
    variables: {
      filter: {
        from,
      }
    }
  });

  return (
    <div className="columns">
      <div className="column is-4">
        <DecisionSupportFilePanel />
      </div>
      <div className="column is-4">
        <WorkgroupsPanel />
      </div>
      <div className="column is-4">
        <div className="panel is-info">
          <p className="level panel-heading mb-0">
            <div className="level-left">
              <div className="level-item">
              Ces 7 derniers jours
              </div>
            </div>
            <div className="level-right">
              <button disabled={true} className="button level-item is-outlined is-info is-inverted">
                <i className="icon fa fa-sliders-h"></i>
              </button>
            </div>
          </p>
          <div className="panel-block">
            <Timeline events={events} />
          </div>
        </div>
      </div>
    </div>
  );
}