// Окно на главном меню с рекомендациями, новостями

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 Widget from "../Componets/WCard/widget";
import "./style.css";
import Accordion from "../Componets/Acardion";
import TabsView from "../Componets/Tabs/tabs";
import {
  ProSidebar,
  Menu,
  MenuItem,
  SubMenu,
  SidebarHeader,
  //SidebarFooter,
  SidebarContent
} from "react-pro-sidebar";

export default class MainPage extends React.Component {
  VVSB = false;
  c = "column__list";
  ui = {
    menu: {
      text: "Меню"
    },
    catalog: {
      text: "Каталог"
    }
  };

  menuBtn = {
    all: {
      borderBottom: "1px solid #AAA",
      background: "#1d1d1d",
      color: "#FFF",
      textDecoration: "none",
      marginLeft: "0px",
      padding: " 10px",
      borderRight: "1px  solid #FFF",
      cursor: "pointer",
      position: "ralative",
      left: "-40px",
      borderRadius: "0px 20px 0px 20px",
      left: "-20px"
      //borderRadius: "10px 20px 0px 0px"
    },
    active: {
      background: "blue",
      //color: "#FFF",
      textDecoration: "none",
      marginLeft: "0px",
      padding: " 10px",
      borderRight: "1px  solid #FFF",
      cursor: "pointer",
      position: "ralative",
      left: "-40px"
    }
  };
  menuButton = [
    { id: "all", text: "Рекомендации", handler: () => this.mainP() },
    {
      id: "inclides",
      text: "Устаовленые",
      handler: () => this.mainP()
    },
    {
      id: "catalog",
      text: "Каталог",
      handler: () => this.viewCatalog()
    }
  ];
  active = "Рекомендации";
  slideNum = 1;

  checkAlias(text) {
    //console.log( "aliases:\t" + this.props.aliases)
    //return text;
    if (text in this.props.aliases) {
      return this.props.aliases[text];
      //console.log(this.props.aliases[text]);
    } else {
      return text;
      //console.log(e);
    }
  }

  viewCatalog() {
    return (
      <div className={this.c}>
        {Object.keys(this.props.category).map((k, i) => (
          <Widget>
            <Accordion
              style={{
                borderRadius: "1.4em",
                background: "#1d1d1d",
                color: "#FFF",
                border: "5px outset rgba(0, 255, 100, 0.5)",
                textAlign: "center"
              }}
              // Список рекомендуемых пакетов в категории
              title={
                this.checkAlias(k) + "\t\t" + this.props.category[k].length
              }
              className="column__list"
            >
              <div
                style={{
                  overflowX: "scroll",
                  maxHeight: "375px"
                  //position: "relative"
                  //background: "#2e323f"
                }}
              >
                {/*}
                  title={
                    this.checkAlias(k) +
                    " (" +
                    this.props.category[k].length +
                    ")"
                  }
                >*/}
                {this.props.category[k].map((pn, j) => (
                  <div
                    className="card__item"
                    style={{
                      borderBottom: "1px solid #FFF",
                      //height: "55px",
                      //margin: "10px",
                      background: "#1d1d1d",
                      color: "#FFF"
                      //background: "#FFF"
                      //height:"75px"
                    }}
                    onClick={() => this.viewInfo(this.props.category[k][i])}
                  >
                    <img
                      className="card__img"
                      style={{
                        width: "32px",
                        height: "32px"
                        //background: "#CCC"
                      }}
                      //src={this.props.icons[pn.Name.split("/")[1]]}
                      //alt={pn.Name.split("/")[1]}
                    />
                    <div style={{ marginLeft: "10px" }}>
                      <b>
                        {" "}
                        <span
                          className="card__title"
                          style={{
                            color: "red",
                            color: "#FFF",
                            //width: "100vw",
                            overflow: "clip",
                            fontSize: "1.1em"
                          }}
                          key={pn.Name}
                        >
                          {pn}
                        </span>
                      </b>
                    </div>
                  </div>
                ))}
              </div>
            </Accordion>
          </Widget>
        ))}
      </div>
    );
  }

  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Главная") {
        document.getElementById("pTitle").textContent = "Главная";
      }
    } catch (e) {
      console.log(e);
    }
  }

  mainP() {
    this.TitleView();

    return (
      <div
        id="HomePage"
        className=""
        style={{ overflowY: "scroll", paddingBottom: "60px" }}
      >
        <div
          className={this.c}
          style={{
            //marginTop: "35px",
            overflowY: "scroll"
            //display: "inline-",

            //float: "left",
            //border: "1px solid #CCC",
            //borderRadius: "6px",
            //boxShadow: "3px 4px 10px #999"
          }}
        >
          <Widget>
            <h3
              style={{
                borderBottom: "1px solid #AAA",
                background: "#1d1d1d",
                color: "#FFF"
              }}
            >
              {" "}
              Новости
            </h3>

            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
          </Widget>
          <Widget
            className="column__list"
            style={{
              marginTop: "35px",
              overflow: "clip",
              display: "inline-",

              //float: "left",
              //border: "1px solid #CCC",
              //borderRadius: "6px",
              boxShadow: "3px 4px 10px #999"
            }}
          >
            <h3
              style={{
                borderBottom: "1px solid #0F0",
                background: "#1d1d1d",
                color: "#FFF"
              }}
            >
              Уведомления
            </h3>

            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
            <li>TEST</li>
          </Widget>
        </div>
        <div className="">
          <div className={this.c}>
            {Object.keys(this.props.rec).map((k) => (
              <Widget>
                <Accordion
                  style={{
                    borderRadius: "1.4em",
                    background: "#1d1d1d",
                    color: "#FFF",
                    border: "5px outset rgba(0, 255, 100, 0.5)",
                    textAlign: "center"
                  }}
                  // Список рекомендуемых пакетов в категории
                  title={k + "\t\t" + this.props.rec[k].length}
                  className="column__list"
                >
                  <div
                    style={{
                      overflowX: "scroll",
                      maxHeight: "375px"
                      //position: "relative"
                      //background: "#2e323f"
                    }}
                  >
                    {this.props.rec[k].map((pn, i) => (
                      <div
                        className="card__item"
                        style={{
                          borderBottom: "1px solid #FFF",
                          //height: "55px",
                          //margin: "10px",
                          background: "#1d1d1d",
                          color: "#FFF"
                          //background: "#FFF"
                          //height:"75px"
                        }}
                        onClick={() => this.viewInfo(this.props.rec[k][i])}
                      >
                        <img
                          className="card__img"
                          style={{
                            width: "32px",
                            height: "32px"
                            //background: "#CCC"
                          }}
                          src={this.props.icons[pn.Name.split("/")[1]]}
                          alt={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: "clip" }}>
                            {pn.Description}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </Accordion>
              </Widget>
            ))}
            <div
              id="info"
              style={{
                position: "fixed",
                top: "0px",
                left: this.posiLetf,
                width: "100%",
                height: "100%",
                background: "#2e323f",
                display: "none"
              }}
            ></div>
          </div>
        </div>
      </div>
    );
  }

  viewSideBar() {
    if (!this.VVSB) {
      document.getElementById("MainContent").style.paddingLeft = "300px";
      document.getElementById("btn-toggle").style.float = "right";
      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;
    }
  }

  viewInfo(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("containerInfo").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("containerInfo")
    );
  }

  render() {
    return (
      <div id="HomePage">
        {this.TitleView()}
        <TabsView activeDefault={0} menuButton={this.menuButton} />

        <div id="listOve">{this.menuButton[0].handler()}</div>
      </div>
    );
  }
}