import React from 'react';
import { connect } from 'react-redux';
import { getCurrentPoolName } from 'app/shared/services/filters/filters.service';
import { DashboardChartWrapper } from 'app/modules/dashboard/components/dashboardChartWrapper';
import { DashboardKeyFigures } from 'app/modules/dashboard/components/dashboardKeyFigures';
import { DashboardVesselList } from 'app/modules/dashboard/components/dashboardVesselList';
import { Headline } from '../../../shared/components/text/text';

export interface Props {
  poolName: string;
}

const dashboardPoolPage = ({ poolName }: Props) =>
  <div className="o-main-column u-margin-top--big o-gutter-left o-gutter-right">
    <Headline size="h2" extraClass="u-margin-bottom u-margin-lg-bottom--big">Key figures | {poolName}</Headline>
    <div className="o-layout__item--grow o-layout o-layout--wrap">
      <div className="c-chart--dashboard o-layout__item-12 o-layout__item-lg-4 o-gutter-lg-right--enormous u-static-size">
        <DashboardChartWrapper />
      </div>
      <div className="o-layout__item-12 o-layout__item-lg-8 o-layout__item--grow o-gutter-lg-left--big">
        <DashboardKeyFigures />
      </div>
    </div>
    <div className="o-layout">
      <DashboardVesselList />
    </div>
  </div>;

export const DashboardPoolPage = connect(state => ({ poolName: getCurrentPoolName(state) }))(dashboardPoolPage);