import ReactDOM from 'react-dom';

// import the lib
import createViewBuilder, {
  createFocuzElement,
} from 'focuz';

// suppose you have a component folder
// that exports all the components you've created
import {
  Container,
  Header,
  MarkdownText,     // markdown is cool, let's use ReactMarkdown component
  Quote,
} from './components';

// provide types object
// the bunch of components the view builder can use
const types = {
  Container,
  Header,
  MarkdownText,
  Quote,
};

// and then create the view builder
const viewBuilder = createViewBuilder(types);


// create the node description,
// the object that describes what you want to render

// can be done everywhere, also into a web service
// or can be stored into a database
const nodeDescription = createFocuzElement(
  // type
  'Container',

  // props
  {
    className: 'article',
  },

  // children
  [
    createFocuzElement(
      'Header',
      {
        text: 'My article title',
      },
    ),
    createFocuzElement(
      'Quote',
      {
        text: 'My article description.',
      },
    ),
    createFocuzElement(
      'MarkdownText',
      {
        text: '*My article content with markdown*',
      },
    ),
  ],
);

// nodeDescription is a simple json object
// createFocuzElement creates an object with a
// _isFocuz attribute for validation
console.log(nodeDescription);

const content = viewBuilder(nodeDescription);
ReactDOM.render(
  content,
  document.getElementById('my-container')
);

const Content = ({ nodeDescription }) => {
  const content = viewBuilder(nodeDescription);
  return (
    <div>
      {content}
    </div>
  );
};

ReactDOM.render(
  <Content contentDescription={contentDescription} />,
  document.getElementById('my-container')
);

function layoutModifier(/* options */) {
  return (node, ComponentType) => {
    // check if the properties we work with exists
    // otherwise return the node itself
    // e.g.: if the style doesn't exists in propTypes,
    // it means that the component doesn't handle style passed from outside
    if (!node.props.layout || !ComponentType.propTypes.style) {
      return node;
    }

    // get the layout property and clone props taking off the layout
    // to avoid React to receive properties the Component doesn't care of
    const layout = node.props.layout;
    const props = {
      ...node.props,
      style: {},
    };
    delete props.layout;

    // add some layout style
    if (layout.margin) {
      props.style.margin = layout.margin;
    }

    if (layout.padding) {
      props.style.padding = layout.padding;
    }

    // something else in your imagination

    // return the new node
    return {
      ...node,
      props,
    };
  }
}