import { createSelector } from 'reselect';
import datePipe from 'app/shared/pipes/date.pipe';
import moneyPipe from 'app/shared/pipes/money.pipe';
import { orderBy } from 'lodash';
import moment from 'moment';
import { getLoadingStatus } from 'app/shared/modules/loading/getStatus';
import { StoreState } from 'app/common/store/store.types';
import { DashboardKeyFigure } from './dashboard.types';

const getDashboardState = (state: StoreState) => state.dashboard;

export const getDashboardKeyFigures = (state: StoreState) => getDashboardState(state).keyFigures;
export const getDashboardCurrentPoolKeyFiguresId = (state: StoreState) => getDashboardState(state).currentPoolKeyFigures;

export const getCurrentVesselsStatus = (state: StoreState) => getDashboardState(state).currentVesselsStatus;
export const getRecentVesselsStatus = (state: StoreState) => getDashboardState(state).recentVesselsStatus;

export const getCurrentVesselsStatusSorted = createSelector(
  getCurrentVesselsStatus,
  (currentVesselsStatus) => [ ...currentVesselsStatus ].sort((a, b) => (a.name > b.name) ? 1 : -1)
);
export const getRecentVesselsStatusSorted = createSelector(
  getRecentVesselsStatus,
  (recentVesselsStatus) => recentVesselsStatus.map(status => ({ date: status.date, summaries: [ ...status.summaries ].sort((a, b) => (a.name > b.name) ? 1 : -1) }))
);

export const getDashboardCurrentKeyFigures = createSelector(
  [ getDashboardKeyFigures, getDashboardCurrentPoolKeyFiguresId ],
  (keyFigures, currentKeyFiguresId) => keyFigures.find(keyFigure => keyFigure.id === currentKeyFiguresId) ?? {} as DashboardKeyFigure
);

export const createDashboardIsLoadingSelector = (dashboardFetchCollectionSelector) => (state) =>
  getLoadingStatus(dashboardFetchCollectionSelector)(state);
export const createDashboardErrorStatusSelector = (dashboardFetchCollectionSelector) => (state) =>
  getLoadingStatus(dashboardFetchCollectionSelector)(state);

const createBarData = aggregation => {
  return {
    id: aggregation.id,
    date: aggregation.date,
    label: datePipe.formatShortMonth(aggregation.date).toUpperCase(),
    value: aggregation.tce,
    filledRatio: aggregation.tceFixedRatio === null ? 100 : aggregation.tceFixedRatio * 100,
    popover: {
      title: moneyPipe.format(aggregation.tce),
      subTitle: 'Pay out',
      label: '',
    },
  };

};

const reduceAggregationMaxValue = (previousMax, aggregation) => {
  return Math.max(previousMax, aggregation.tce);
};

export const getDashboardChartData = createSelector(
  [ getDashboardKeyFigures, getDashboardCurrentPoolKeyFiguresId ],
  (keyFigures, currentPoolKeyFiguresId) => {
    const aggregations = orderBy(keyFigures, (item) => moment(item.date), [ 'asc' ]);

    const maxValue = aggregations.reduce(reduceAggregationMaxValue, 0) * 1.1;
    const barSeries = aggregations.map(createBarData);

    return {
      maxValue: maxValue,
      selectedId: currentPoolKeyFiguresId,
      barSeries: barSeries,
    };
  }
);