import React, { Fragment, PureComponent } from "react";
import JcodParser from "jcod-react-parser";

import { Link, Route, Switch } from "react-router-dom";

import * as templates from "templates";

import { withRouteContext } from "react-router-json-routes-loader";
// import { withRouteContext } from "extra/react-router-json-routes-loader";

const parserOption = {
  htmlElement: true,
  // customElement: true,
  // allowElements: ['div', 'popup-info'],
  allowElements: ["popup-info"]
};

class Layout extends PureComponent {
  render() {
    const { dataRoute, path, userProps, RouteProvider } = this.props;
    console.log("dataRoute >>", dataRoute);
    return (
      <Fragment>
        <header>Sample of header</header>
        <nav>
          <Link to="/">home</Link> | <Link to="/test">test</Link>
        </nav>
        {userProps} ::: {path}
        <hr />
        <JcodParser
          components={templates}
          data={dataRoute.jcodContent}
          options={parserOption}
        />
      </Fragment>
    );
  }
}

export default withRouteContext(Layout, Route, Switch);