var { observable, autorun } = require("mobx");
var Entity = require('xx/xxxx/entity');

var todoStore = observable({
  todos: [],
  get completedCount() {
    return this.todos.filter(todo => todo.completed).length
  }
})

autorun(function () {
  // For Backbone
  this.xxxBackBoneComponent = new Entity({
    model: todoStore.todos,
    editable: true
  });

  // For Arch
  active.render($html, () => {
    this.xxArchComponent = arch.getComponent(xxx);
  });
})

todoStore.todos[0] = {
  title: "Take a walk",
  completed: false
}

stores
--root.ts
--domain
----aaaStore.ts
----bbbStore.ts
--ui
----application.ts

export default class RootStore {
  @observable
  aaStore;

  @observable
  bbStore;

  @observable
  applicationUIStore;

  constructor() {
    // Domain Store Init
    this.aaStore = new AStore(this);
    this.bbStore = new BStore(this);
    ...

    // UI Store Init
    this.applicationUIStore = new ApplicationUIStore(this);
    ...
  }
}

ContainerAComponent
--ContainerAComponent.tsx
--ContainerAComponentUIStore.ts

export default class ContainerAComponentUIStore {
  rootStore;
  constructor(rootStore) {
    this.rootStore = rootStore;
  }

  @observable
  addHoc = '';
  
  @action.bound
  onAdhocChange = (addHocNewValue) => {
    ....
  }

export class ContainerAComponent extends React.Component {
  handleAdhocChange = (e) => {
    this.props.onAdhocChange(e.target.value);
  }
  ...
}
export default connectComponentStore(ContainerAComponent, ContainerAComponentUIStore);

export default (WrapperedComponent, ComponentStore) => {
  @inject('appStore')
  @observer
  class Connect extends React.Component {
    @observable componentStore;

    constructor(props) {
      super(props);
      this.componentStore = new ComponentStore(props.appStore);
      this.ref = createRef();
    }

    static displayName = `${WrapperedComponent.displayName || WrapperedComponent.name}-withUIStore`

    componentDidMount() {
      this.componentStore.mapState(this.props);
    }

    componentDidUpdate(preProps, preState) {
      this.componentStore.mapState(this.props);
    }

    render() {
      return (<WrapperedComponent ref={this.ref} {...this.componentStore.toProps} {...this.props} />);
    }
  }

  return Connect;
};

const testData = [
  { name: '1', primary: true, startDate: '2018-01-01T08:00:00Z', endDate: '2018-05-01T08:00:00Z' },
  { name: 'A', primary: true, startDate: '2018-02-01T08:00:00Z', endDate: '2018-06-01T08:00:00Z' },
  { name: 'a', primary: true, startDate: '2019-02-01T08:00:00Z', endDate: '2019-05-01T08:00:00Z' },
  { name: 'b', primary: false, startDate: '2019-02-01T08:00:00Z', endDate: '2019-02-01T08:00:00Z' },
]

const sortFlattenPrograms = (flattenPrograms) =>
    flattenPrograms.sort((a, b) => {
      // first sort by archived: unarchived first
      if(a.archived && !b.archived) {
        return 1;
      } else if(!a.archived && b.archived) {
        return -1;
      }

      // sort by start date: latest first
      let dateCompareResult = compareDateLatestFirst(a.startDate, b.startDate);
      if(dateCompareResult !== 0) {
        return dateCompareResult;
      }

      // sort by end date: latest first
      dateCompareResult = compareDateLatestFirst(a.endDate, b.endDate);
      if(dateCompareResult !== 0) {
        return dateCompareResult;
      }

      // sort by program name - location name: alphabetically (ignore case)
      const nameCompareResult = compareStringAlphabeticallyIgnoreCase(getProgramFullName(a), getProgramFullName(b));
      if(nameCompareResult !== 0) {
        return nameCompareResult;
      }

      return 0;
    });

/**
   * Sort by order list from right to left
   * For example: we want to order by start date, if date equal, then order by end date, if equal, then name
   * composeOrderBy([oderByName, orderByEndDate, orderByStartDate])
   * @param {*} comparators
   */
  const composeOrderBy = (comparators) => {
    const makeChainedComparator = (first, next) => {
      return function (a, b) {
        var result = first(a, b);
        if(result !== 0) return result;
        return next(a, b);
      };
    };
    return comparators.reduce(function (chained, first) {
      return makeChainedComparator(first, chained);
    });
  };

// 预先定义的方法
comparators = {
  compareStringField: (field, ignoreCase = true)=> (a, b) => { ... },
  compareBoolField: (field, trueFirst = true) => (a, b) => { ... },
  compareDateLatestFirst: (field) => (a, b) => { ... },
}

data.sort(composeOrderBy([
        comparators.compareNameIgnoreCase(),
        comparators.compareDateLatestFirst('endDate'),
        comparators.compareDateLatestFirst('startDate'),
        comparators.compareBoolField('archived', false)
      ]));

data.sort(composeOrderBy([
        comparators.compareNameIgnoreCase(),
        comparators.compareDateLatestFirst('modifiedDate')
      ]));

var SuperClass = function SuperClass() {
  _classCallCheck(this, SuperClass);

  _defineProperty(this, "foo", function () {
    return console.log('foo init in supper class');
  }());

  console.log('super construtor');
};

var WhatEver =
/*#__PURE__*/
function (_SuperClass) {
  _inherits(WhatEver, _SuperClass);

  function WhatEver() {
    var _this;

    _classCallCheck(this, WhatEver);

    console.log('before sub class constructor');
    _this = _possibleConstructorReturn(this, _getPrototypeOf(WhatEver).call(this));

    _defineProperty(_assertThisInitialized(_this), "foo", function () {
      return console.log('foo init in sub class');
    }());

    console.log('after sub class constructor');
    return _this;
  }

  return WhatEver;
}(SuperClass);

new WhatEver();