import React from "react";
import ReactDOM from "react-dom";
import Scard from "../Componets/Cards/smallCard";
import FullCard from "../Componets/Cards/fullCard";
//import NavBar from "../Componets/NavList/navList";
//import div from "@mui/material/div";
import "./style.css";

export default class MainPage extends React.Component {
  constructor(props) {
    super(props);
    //document.getElementById("pTitle").textContent="Рекомендации"
  }

  VVSB = false;
  viewSideBar() {
    if (!this.VVSB) {
      document.getElementById("MainContent").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("navBar").style.left = "-280px";
      this.VVSB = false;
    }
  }
  viweinfo(pkg) {
    //onClick={() => this.props.ViewPackageInfo(this.props.rec[k][i])}
    document.getElementById("backBtn").style.display = "block";
    document.getElementById("pTitle").textContent = pkg.Name.split("/")[1];
    //document.getElementById("container").style.display = "none";

    //document.getElementById("conteinerInfo").style.display = "block";
    ReactDOM.render(
      <FullCard
        PackageName={pkg}
        PropMain={this.props.rec}
        icons={this.props.icons}
        useDes={this.props.useDes}
        Ipkg={this.props.Ipkg}
      />,
      document.getElementById("HomePage")
    );
  }
  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Рекомендации") {
        document.getElementById("pTitle").textContent = "Рекомендации";
      }
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    this.TitleView();
    return (
      <div id="HomePage" className="wrapper">
        {}
        {Object.keys(this.props.rec).map((k) => (
          <div>
            <div>
              <h2 className="column__title--wrapper" style={{}}>
                <b stye={{}}>{k.split("[")[1]}</b>
              </h2>
            </div>
            <div
              className="column__list"
              style={{
                //paddingRight: "0px",
                //width: "100%",
                marginTop: "20px",
                overflow: "clip"
              }}
            >
              {this.props.rec[k].map((pn, i) => (
                <div
                  className="card__list"
                  style={{
                    padding: "5px",
                    //margin: "3px",
                    marginTop: "10px",
                    //width: "100vw",
                    display: "inline-flex",
                    border: "1px solid #CCC",
                    borderRadius: " 10px",
                    boxShadow: "3px 4px 10px #CDC"
                    //height:"75px"
                  }}
                  onClick={() => this.viweinfo(this.props.rec[k][i])}
                >
                  <img
                    className="card__img"
                    style={{
                      width: "64px",
                      height: "64px"
                    }}
                    src={this.props.icons[pn.Name.split("/")[1]]}
                  />
                  <div style={{ marginLeft: "10px" }}>
                    <b>
                      {" "}
                      <span
                        className="card__title"
                        style={{
                          color: "red",
                          width: "100vw",
                          overflow: "clip",
                          fontSize: "1.1em"
                        }}
                        key={pn.Name}
                      >
                        {pn.Name.split("/")[1]}
                      </span>
                    </b>
                    <div style={{ overflow: "hidden" }}>{pn.Description}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        ))}
        <div
          id="info"
          style={{
            position: "fixed",
            top: "0px",
            left: this.posiLetf,
            width: "100%",
            height: "100%",
            background: "#2e323f",
            display: "none"
          }}
        ></div>
      </div>
    );
  }
}