import Component from '@glimmer/component';
import { map } from 'rsvp';
import { isEmpty } from '@ember/utils';
import { htmlSafe } from '@ember/string';
import { timeout } from 'ember-concurrency';
import { inject as service } from '@ember/service';
import {tracked} from '@glimmer/tracking';
import { action } from '@ember/object';
import {restartableTask} from "ember-concurrency-decorators";

export default class VisualizeCourseSessionTypes extends Component {
  @service router;
  @service intl;
  @tracked data;
  @tracked tooltipContent = null;
  @tracked tooltipTitle = null;
  chartType = 'horz-bar';

  @restartableTask
  *load(element, [course]) {
    const sessions = yield course.get('sessions');
    const dataMap = yield map(sessions.toArray(), async session => {
      const sessionType = await session.get('sessionType');
      const hours = await session.get('totalSumDuration');
      const minutes = Math.round(hours * 60);
      return {
        sessionTitle: session.get('title'),
        sessionTypeTitle: sessionType.get('title'),
        sessionTypeId: sessionType.get('id'),
        minutes,
      };
    });

    const mappedSessionTypes = dataMap.reduce((set, obj) => {
      let existing = set.findBy('label', obj.sessionTypeTitle);
      if (!existing) {
        existing = {
          data: 0,
          label: obj.sessionTypeTitle,
          meta: {
            sessionType: obj.sessionTypeTitle,
            sessionTypeId: obj.sessionTypeId,
            sessions: []
          }
        };
        set.pushObject(existing);
      }
      existing.data += obj.minutes;
      existing.meta.sessions.pushObject(obj.sessionTitle);

      return set;
    }, []);


    const totalMinutes = mappedSessionTypes.mapBy('data').reduce((total, minutes) => total + minutes, 0);
    this.data = mappedSessionTypes.map(obj => {
      const percent = (obj.data / totalMinutes * 100).toFixed(1);
      obj.label = `${obj.meta.sessionType} ${percent}%`;
      obj.meta.totalMinutes = totalMinutes;
      obj.meta.percent = percent;
      return obj;
    }).sort((first, second) => {
      return first.data - second.data;
    });
  }

  @action
  barClick(obj) {
    if (this.args.isIcon || isEmpty(obj) || obj.empty || isEmpty(obj.meta)) {
      return;
    }
    this.router.transitionTo('course-visualize-session-type', this.args.course.get('id'), obj.meta.sessionTypeId);
  }

  @restartableTask
  *barHover(obj) {
    yield timeout(100);
    if (this.args.isIcon || isEmpty(obj) || obj.empty) {
      this.tooltipTitle = null;
      this.tooltipContent = null;
      return;
    }
    const { label, data, meta } = obj;

    const title = htmlSafe(`${label} ${data} ${this.intl.t('general.minutes')}`);
    const sessions = meta.sessions.uniq().sort().join();

    this.tooltipTitle = title;
    this.tooltipContent = sessions;
  }
}

@@ -578,17 +578,22 @@
 = null;%0A
- 
+%0A  get
  chartTy
@@ -594,18 +594,54 @@
 hartType
- =
+() %7B%0A    return this.args.chartType %7C%7C
  'horz-b
@@ -644,16 +644,20 @@
 rz-bar';
+%0A  %7D
 %0A%0A  @res
@@ -2194,254 +2194,8 @@
  %7D%0A%0A
-  @action%0A  barClick(obj) %7B%0A    if (this.args.isIcon %7C%7C isEmpty(obj) %7C%7C obj.empty %7C%7C isEmpty(obj.meta)) %7B%0A      return;%0A    %7D%0A    this.router.transitionTo('course-visualize-session-type', this.args.course.get('id'), obj.meta.sessionTypeId);%0A  %7D%0A%0A
   @r
@@ -2645,11 +2645,257 @@
 ons;%0A  %7D
+%0A%0A  @action%0A  barClick(obj) %7B%0A    if (this.args.isIcon %7C%7C isEmpty(obj) %7C%7C obj.empty %7C%7C isEmpty(obj.meta)) %7B%0A      return;%0A    %7D%0A    this.router.transitionTo('course-visualize-session-type', this.args.course.get('id'), obj.meta.sessionTypeId);%0A  %7D
 %0A%7D%0A

allow chart type to be specified on input.