pageflow.linkmapPage.Area = Backbone.Model.extend({
  modelName: 'area',
  i18nKey: 'pageflow/linkmap_page/area',

  mixins: [pageflow.transientReferences],

  target: function() {
    // This should eventually be replaces with some sort of
    // polymorphic lookup for referenceable objects i.e.
    //
    //     pageflow.xxx.getPolymorphic(this.get('target_type'), this.get('target_id'));
    //
    if (this.get('target_type') === 'audio_file') {
      return pageflow.audioFiles.get(this.get('target_id'));
    }
    else if (this.get('target_type') === 'page') {
      return pageflow.pages.getByPermaId(this.get('target_id'));
    }
    else if (this.get('target_type') === 'external_site') {
      return pageflow.externalLinks.sites.getByPermaId(this.get('target_id'));
    }
  },

  targetPage: function() {
    return this.get('target_type') === 'page' ? this.target() : null;
  },

  title: function() {
    if (this.get('target_type') === 'text_only') {
      return this.get('link_title');
    }
    else {
      var target = this.target();
      return target ? target.title() : null;
    }
  },

  thumbnailFile: function() {
    if (this.get('target_type') === 'text_only') {
      return this.textOnlyAreaPlaceholderFile();
    }

    var target = this.target();
    return target ? target.thumbnailFile() : null;
  },

  textOnlyAreaPlaceholderFile: function() {
    if (!pageflow.linkmapPage.Area.textOnlyAreaPlaceholderFile) {
      var file = new pageflow.AudioFile({
        state: 'encoded'
      });

      file.thumbnailPictogram = 'text_only';
      pageflow.linkmapPage.Area.textOnlyAreaPlaceholderFile = file;
    }

    return pageflow.linkmapPage.Area.textOnlyAreaPlaceholderFile;
  },

  label: function() {
    return this.get('name');
  },

  select: function() {
    this.trigger('select', this);
  },

  selectMask: function() {
    var model = this;

    return pageflow.linkmapPage.selectArea(
      this.collection.page,
      {
        type: 'colorMapComponent',
        areaIndex: this.collection.indexOf(this)
      }
    ).then(function(attributes) {
      model.set(_.extend(attributes, {
        marker: 'no_marker'
      }));
      model.trigger('change:dimensions');
    });
  },

  unsetMask: function() {
    this.set({
      marker: 'no_marker',
      mask_perma_id: undefined,
      color_map_component_id: undefined
    });
    this.trigger('change:dimensions');
  },

  setDimensions: function(left, top, width, height) {
    this.set({
      left: left,
      top: top,
      width: width,
      height: height
    });
    this.trigger('change:dimensions');
  },

  highlight: function() {
    this.set('highlighted', true);
  },

  resetHighlight: function() {
    this.unset('highlighted');
  },

  editPath: function() {
    var areaIndex = this.collection.indexOf(this);
    return '/linkmap_pages/' + this.getRoutableId() + '/areas/' + areaIndex;
  },

  getRoutableId: function() {
    return this.collection.page.id;
  },

  remove: function() {
    this.collection.remove(this);
  },

  get: function(attr) {
    if (attr === 'color_map_component_id') {
      var colorMapComponentId = this.attributes['color_map_component_id'];
      if(colorMapComponentId === undefined) {
        // also try legacy mask_perma_id as fallback
        colorMapComponentId = this.attributes['mask_perma_id'];
      }
      return colorMapComponentId;
    } else {
      return this.attributes[attr];
    }
  }
});