import { Model } from 'backbone';
import { result, forEach } from 'underscore';
import Frames from 'canvas/model/Frames';

export default class Page extends Model {
  defaults() {
    return {
      frames: [],
      _undo: true
    };
  }

  initialize(props, opts = {}) {
    const { config = {} } = opts;
    const { em } = config;
    const defFrame = {};
    this.em = em;
    if (!props.frames) {
      defFrame.component = props.component;
      defFrame.styles = props.styles;
      ['component', 'styles'].map(i => this.unset(i));
    }
    const frms = props.frames || [defFrame];
    const frames = new Frames(frms, config);
    frames.page = this;
    this.set('frames', frames);
    const um = em && em.get('UndoManager');
    um && um.add(frames);
  }

  onRemove() {
    this.get('frames').reset();
  }

  getFrames() {
    return this.get('frames');
  }

  getMainFrame() {
    return this.getFrames().at(0);
  }

  getMainComponent() {
    const frame = this.getMainFrame();
    return frame && frame.getComponent();
  }

  toJSON(opts = {}) {
    const obj = Model.prototype.toJSON.call(this, opts);
    const defaults = result(this, 'defaults');

    // Remove private keys
    forEach(obj, (value, key) => {
      key.indexOf('_') === 0 && delete obj[key];
    });

    forEach(defaults, (value, key) => {
      if (obj[key] === value) delete obj[key];
    });

    return obj;
  }
}

@@ -870,64 +870,649 @@
 %0A%0A  
-getMainFrame() %7B%0A    return this.getFrames().at(0);%0A  %7D%0A
+/**%0A   * Get all frames%0A   * @returns %7BArray%3CFrame%3E%7D%0A   * @example%0A   * const arrayOfFrames = page.getAllFrames();%0A   */%0A  getAllFrames() %7B%0A    return this.getFrames().models %7C%7C %5B%5D;%0A  %7D%0A%0A  /**%0A   * Get the first frame of the page (identified always as the main one)%0A   * @returns %7BFrame%7D%0A   * @example%0A   * const mainFrame = page.getMainFrame();%0A   */%0A  getMainFrame() %7B%0A    return this.getFrames().at(0);%0A  %7D%0A%0A  /**%0A   * Get the root component (usually is the %60wrapper%60 component) from the main frame%0A   * @returns %7BComponent%7D%0A   * @example%0A   * const rootComponent = page.getMainComponent();%0A   * console.log(rootComponent.toHTML());%0A   */
 %0A  g

Update Page jsdoc