import { Container } from 'aurelia-framework';

import { EventAggregator } from 'aurelia-event-aggregator';

import States from 'services/states';

import { depile } from 'components/fragments/fragments-actions';

import {
  MODE_MEAN, MODE_TREND, MODE_VARIANCE, MODE_DIFFERENCE
} from 'components/fragments/fragments-defaults';

import COLORS from 'configs/colors';

const store = Container.instance.get(States).store;
const event = Container.instance.get(EventAggregator);

export const INSPECT = {
  name: 'Inspect',
  color: COLORS.BLACK,
  background: COLORS.PRIMARY,
  shortCut: 'I',
  trigger (pile) {
    console.error('Not implemented yet');
  },
  single: false,
  stackedPileOnly: true
};

export const DEPILE = {
  name: 'Depile',
  color: COLORS.WHITE,
  background: COLORS.BLACK,
  shortCut: 'D',
  trigger (pile) {
    store.dispatch(depile(MODE_MEAN, pile));
  },
  single: false,
  stackedPileOnly: true
};

export const DIFFERENCE = {
  name: 'Difference',
  color: COLORS.WHITE,
  background: 0x666666,
  row: 0,
  shortCut: 'F',
  trigger (pile) {
    event.publish('decompose.fgm.coverDispMode', { mode: MODE_DIFFERENCE, pile });
  },
  triggerEvent: 'hover',
  single: false,
  stackedPileOnly: true
};

export const MEAN = {
  name: 'Mean',
  color: COLORS.WHITE,
  background: 0x666666,
  shortCut: 'M',
  trigger (pile) {
    event.publish('decompose.fgm.coverDispMode', { mode: MODE_MEAN, pile });
  },
  triggerEvent: 'hover',
  single: false,
  marginTop: 3,
  stackedPileOnly: true
};

export const TREND = {
  name: 'Trend',
  color: COLORS.WHITE,
  background: 0x666666,
  shortCut: 'T',
  trigger (pile) {
    event.publish('decompose.fgm.coverDispMode', { mode: MODE_TREND, pile });
  },
  triggerEvent: 'hover',
  single: false,
  stackedPileOnly: true
};

export const VARIANCE = {
  name: 'Variance',
  color: COLORS.WHITE,
  background: 0x666666,
  shortCut: 'V',
  trigger (pile) {
    event.publish('decompose.fgm.coverDispMode', { mode: MODE_VARIANCE, pile });
  },
  triggerEvent: 'hover',
  single: false,
  stackedPileOnly: true
};

export default [
  INSPECT,
  DEPILE,
  MEAN,
  VARIANCE,
  TREND,
  DIFFERENCE
];

@@ -151,21 +151,40 @@
 port %7B d
-ep
+ispersePiles, trashP
 ile
+s
  %7D from 
@@ -544,29 +544,29 @@
 lor: COLORS.
-BLACK
+WHITE
 ,%0A  backgrou
@@ -580,15 +580,13 @@
 ORS.
-PRIMARY
+BLACK
 ,%0A  
@@ -627,43 +627,59 @@
     
-console.error('Not implemented yet'
+event.publish('decompose.fgm.inspectPile', %7B pile %7D
 );%0A 
@@ -741,20 +741,22 @@
  const D
-EPIL
+ISPERS
 E = %7B%0A  
@@ -763,20 +763,22 @@
 name: 'D
-epil
+ispers
 e',%0A  co
@@ -884,29 +884,27 @@
 ch(d
-epile(MODE_MEAN, 
+ispersePiles(%5B
 pile
+%5D
 ));%0A
@@ -1505,20 +1505,221 @@
 ,%0A  
-marginTop: 3
+stackedPileOnly: true%0A%7D;%0A%0Aexport const TRASH = %7B%0A  name: 'Trash',%0A  color: COLORS.WHITE,%0A  background: COLORS.BLACK,%0A  shortCut: 'R',%0A  trigger (pile) %7B%0A    store.dispatch(trashPiles(%5Bpile%5D));%0A  %7D,%0A  single: false
 ,%0A  
@@ -2340,13 +2340,24 @@
 %0A  D
-EPILE
+ISPERSE,%0A  TRASH
 ,%0A  

Add trashing to the pile menu. Adjust colors and margin