import { action, computed } from 'mobx';
import { pick, sortBy, map, groupBy, mapValues, extend } from 'lodash';
import Map from './map';
import lazyGetter from '../helpers/lazy-getter';
import { chapterSectionToNumber } from '../helpers/content';
import Hypothesis from './annotations/hypothesis';
import Annotation from './annotations/annotation';
import AnnotationsUX from './annotations/ux';
export default class Annotations extends Map {

  constructor() {
    super();
    this.api.requestsInProgress.set('fetch', true);
    Hypothesis.fetchUserInfo().then(this.updateAnnotations);
  }

  @lazyGetter ux = new AnnotationsUX();


  @computed get byCourseAndPage() {
    return mapValues(
      groupBy(this.array, 'courseId'),
      (cpgs) => mapValues(
        groupBy(
          sortBy(cpgs, c=>chapterSectionToNumber(c.chapter_section)),
          a => a.chapter_section.join('.')
        ),
        (annotations) => sortBy(annotations, (annotation) =>
          [annotation.selection.rect.top, annotation.selection.start]
        )
      )
    );
  }

  @action.bound updateAnnotations(annotations) {
    this.api.requestsInProgress.delete('fetch');
    this.api.requestCounts.read += 1;
    if (annotations) {
      annotations.forEach((an) => {
        const note = this.get(an.id);
        an.listing = this;
        note ? note.update(an) : this.set(an.id, new Annotation(an));
      });
    }
  }

  update(annotation) {
    this.api.requestsInProgress.set('update', true);
    return Hypothesis.request({
      method: 'PATCH',
      service: `annotations/${annotation.id}`,
      data: { text: annotation.text },
    }).then((annotationData) => {
      annotation.updateAfterSave(annotationData);
      this.api.requestsInProgress.delete('update');
      this.api.requestCounts.update += 1;
      return annotation;
    });
  }

  create(options) {
    this.api.requestsInProgress.set('create', true);
    return Hypothesis.create(
      options.documentId,
      options.selection, '', options
    ).then((annotationData) => {
      this.api.requestsInProgress.delete('create');
      this.api.requestCounts.create += 1;
      annotationData.listing = this;
      const annotation = new Annotation(annotationData);
      this.set(annotation.id, annotation);
      return annotation;
    });
  }

  destroy(annotation) {
    this.api.requestsInProgress.set('delete', true);
    return Hypothesis.request({
      method: 'DELETE',
      service: `annotations/${annotation.id}`,
    }).then(() => {
      annotation.isDeleted = true;
      this.api.requestsInProgress.delete('delete');
      this.api.requestCounts.delete += 1;
      this.delete(annotation.id);
      return annotation;
    });
  }

}

@@ -942,46 +942,10 @@
 ns, 
-(annotation) =%3E%0A          %5Bannotation.
+%5B'
 sele
@@ -962,21 +962,12 @@
 .top
+'
 , 
-annotation.
+'
 sele
@@ -981,18 +981,10 @@
 tart
+'
 %5D
-%0A        
 )%0A  

use property chain for sort