import Ember from 'ember';
import { task } from 'ember-concurrency';
import CanvasRenderer from '../utils/canvas-renderer';
import ImageProxy from '../utils/image-proxy';

export default Ember.Component.extend({
  image: Ember.computed('imageSrc', {
    get() {
      let src = this.get('imageSrc');
      return ImageProxy.create({src});
    }
  }),

  canvasRenderer: Ember.computed('element', {
    get() {
      let canvas = this.$('canvas').get(0);
      return CanvasRenderer.create({canvas});
    }
  }),

  canvasRender: task(function * () {
    let image = yield this.get('image');
    let render = this.get('canvasRenderer');
    let annotations = this.get('annotations') || [];
    let selectedAnnotation = this.get('selected');
    let cursor = this.get('cursor');
    render.background(image);
    for (let annotation of annotations) {
      let { x, y, id } = Ember.getProperties(annotation, 'x', 'y', 'id');
      let isSelected = Ember.isEqual(annotation, selectedAnnotation);
      render.annotation(x, y, id, isSelected);
    }
    if (cursor && render.isInBounds(cursor)) {
      render.cursor(cursor.x, cursor.y, cursor.highlight);
    }
  })
  .restartable()
  .observes('image', 'selected', 'cursor', 'annotations.[]'),

  didInsertElement() {
    this._super(...arguments);
    this.get('canvasRender').perform();
  },

  didUpdateAttrs() {
    this._super(...arguments);
    this.get('canvasRender').perform();
  },

  detectCursorCollision(pos) {
    let render = this.get('canvasRenderer');
    let selected = this.get('selected');
    let hitCursor = render.hitAnnotation(pos, 5);
    let hitSelected = render.hitAnnotation(selected);
    return hitCursor.detectCollision(hitSelected) ? selected : null;
  },

  detectAnnotationCollision(pos) {
    let render = this.get('canvasRenderer');
    let annotations = this.get('annotations');
    let hitCursor = render.hitAnnotation(pos, 5);
    return annotations.find(annotation => {
      return render.hitAnnotation(annotation).detectCollision(hitCursor);
    });
  },

  actions: {
    trackCursor(evt) {
      if (evt.button !== 0 || evt.buttons !== 1) {
        return;
      }
      let render = this.get('canvasRenderer');
      let pos = render.getMousePosition(evt);
      let selected = this.detectAnnotationCollision(pos);
      this.set('selected', selected || pos);
      this.set('cursor', pos);
      return false;
    },

    selectCursor(evt) {
      let render = this.get('canvasRenderer');
      let pos = render.getMousePosition(evt);
      let selected = this.detectAnnotationCollision(pos);
      this.set('selected', selected || pos);
      this.set('cursor', selected ? null : Ember.assign({highlight: true}, pos));
      Ember.run.scheduleOnce('afterRender', () => this.$('input').focus());
      return false;
    },

    clearSelected() {
      this.set('selected', null);
      this.set('cursor', null);
    },

    updateDescription(annotation, evt) {
      let description = Ember.get(evt, 'target.value');
      Ember.set(annotation, 'description', description);
      this.send('clearSelected');
      if (Ember.isNone(Ember.get(annotation, 'id'))) {
        return this.send('addAnnotation', annotation);
      }
    },

    addAnnotation(annotation) {
      this.send('clearSelected');
      return Ember.tryInvoke(this, 'addAnnotation', [annotation]);
    },

    removeAnnotation(annotation) {
      this.send('clearSelected');
      return Ember.tryInvoke(this, 'removeAnnotation', [annotation]);
    },

    descriptionKeyHandler(annotation, evt) {
      if (evt.keyCode === 13) {
        return this.send('annotationChanged', annotation);
      }
    }
  }
});