import React from "react";
import NavBar from "./NavList/navList";
import MainPage from "../pages/main";
import ReactDOM from "react-dom";
export default class AppConteiner extends React.Component {
  ui = {
    BackButton: {
      text: "Назад"
    },
    button: {
      sync: {
        text: "Обновить",
        icon:
          "https://im0-tub-ru.yandex.net/i?id=82aba01eaa9844244dfae87e7a7e5583&n=13%22"
      }
    }
  };
  toBack() {
    document.getElementById("backBtn").style.display = "none";
    //document.getElementById("pTitle").textContent = "Рекомендации";
    /*ReactDOM.render(
      <MainPage
        icons={this.props.icons}
        rec={this.props.rec}
        useDes={this.props.useDes}
      />,
      document.getElementById("HomePage")
    );*/

    window.location.reload();
    //document.getElementById('pTitle').textContent = this.props.menuItems[]
  }
  viewSideBar() {
    if (!this.VVSB) {
      document.getElementById("MainContent").style.paddingLeft = "300px";
      document.getElementById("btn-toggle").style.paddingLeft = "300px";
      document.getElementById("btn-toggle").style.float = "righ";
      document.getElementById("navBar").style.left = "0px";
      this.VVSB = true;
    } else {
      document.getElementById("MainContent").style.paddingLeft = "0px";
      document.getElementById("btn-toggle").style.paddingLeft = "0px";
      document.getElementById("navBar").style.left = "-280px";
      this.VVSB = false;
    }
  }
  ViewTitle() {
    for (let i = 0; i++; this.props.menuItems.length) {
      if (window.location.href.split(this.props.menuItems[i]).length >= 2) {
        document.getElementById("pTitle").textContent = this.props.menuItems[
          i
        ].text;
      }
      console.log(i);
    }
  }

  render() {
    return (
      <div>
        <NavBar
          category={this.props.category}
          menuItem={this.props.menuItems}
          aliases={this.props.aliases}
          Ipkgs={this.props.Ipkg}
        />

        <div className="page-wrapper chiller-theme toggled">
          <ul
            id="btn-toggle"
            class="btn-toggle"
            style={{
              display: "inline",
              padding: "20px",
              margin: "0px",
              borderBottom: "1px solid #AAA",
              width: "100%",
              background: "#2e323f",
              position: "fixed",
              top: "0",
              color: "#FFF"
            }}
          >
            <svg
              style={{
                float: "left",
                paddingLeft: "20px",
                paddingRight: "10px"
              }}
              onClick={() => this.viewSideBar()}
              stroke="currentColor"
              fill="currentColor"
              stroke-width="0"
              viewBox="0 0 448 512"
              height="1.4em"
              width="1.4em"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path>
            </svg>
            <div
              id="backBtn"
              style={{ paddingLeft: "20px", float: "left", display: "none" }}
              onClick={() => this.toBack()}
            >
              <img
                style={{ width: "1.4em", height: "1.4em" }}
                src="https://cdn-icons-png.flaticon.com/512/189/189254.png"
              />
            </div>
            <b>
              <div
                id="pTitle"
                style={{
                  float: "left",
                  width: "50vw",
                  marginleft: "20px",
                  textAlign: "center",
                  fontSize: "1.4em",
                  color: "#FFF"
                }}
              >
                {" "}
                ""
              </div>
            </b>
            {this.ViewTitle()}
          </ul>
          <main
            id="MainContent"
            className="page-content"
            style={{ paddingLeft: "10px", margin: "10px" }}
          >
            <div className="container">{this.props.children}</div>
          </main>
        </div>
      </div>
    );
  }
}