// To avoid passing params/props through out the object graph construction
// You separate your construction logic from the business logic of your components
// And initialise your graph using factory methods close to the application bootstrap

import util from './util';

class App {
  constructor(page) {
    this.page = page
  }

  // Object graph construction is separate from business logic
  // Note that dependencies don't have to be passed through the entire chain
  static create() {
    const atom = new Atom(util);
    const molecule = new Molecule(atom);
    const organism = new Organism(molecule);
    const template = new Template(organism);
    const page = new Page(template);
    return new App(page);
  }
}

// AKA in JSX
class App {
  create() {
    const atom = <Atom util={util}/>;
    const molecule = <Molecule atom={atom}/>;
    const organism = <Organism molecule={molecule}/>;
    const template = <Template organism={organism}/>;
    const page = <Page template={template}/>;
    const App = () => <App page={page}/>;
    return <App/>
  }
}

// If object graph construction is mixed with business/component logic
// then the params/props must be passed through the entire chain of construction
import util from './util';

class App {
  // Object graph construction is mixed with business logic
  constructor() {
    this.page = new Page(util);
  }
}
class Page {
  constructor(util) {
    this.template = new Template(util);
  }
}
class Template {
  constructor(util) {
    this.organism = new Organism(util);
  }
}
class Organism {
  constructor(util) {
    this.molecule = new Molecule(util);
  }
}
class Molecule {
  constructor(util) {
    this.atom = new Atom(util);
  }
}
class Atom {
  constructor(util) {
    this.util = util;
  }
}

// In JSX
const App = (util) => {
  const Page = (util) => {
    const Template = (util) => {
      const Organism = (util) => {
        const Molecule = (util) => {
          const Atom = (util) => {
            const fooBar = util.doTheThing();
            return <div>{fooBar}</div>
          };

          return <Atom util={util}/>;
        };

        return <Molecule util={util}/>;
      };

      return <Organism util={util}/>;
    };

    return <Template util={util}/>;
  };

  return <Page util={util}/>;
};