//import { Button } from "@material-ui/core";
import React from "react";
import ReactDOM from "react-dom";
import OvItem from "../Componets/overlayItem";
//import Button from "../Componets/button";
//import Grid from "@mui/material/Grid";
const title = { name: "Имя", discription: "Описание", homepage: "Обзор" };
//import "./style.css";
class PageOverlays extends React.Component {
  VVSB = false;
  menuBtn = {
    background: "orange",
    color: "#FFF",
    textDecoration: "none",
    marginLeft: "0px",
    padding: " 10px",
    borderRight: "1px  solid #FFF",
    cursor: "pointer",
    position: "ralative",
    left: "-40px",
    borderRadius: "10px 20px 0px 0px"
  };
  menuButton = [
    { text: "Все", handler: () => this.viewAllOverlay() },
    { text: "Подключеные", handler: () => this.viewIncludeOverlays() },
    { text: "Категории", handler: () => this.viweategotyOverlays() }
  ];
  slideNum = 1;
  //routing overalays page
  viewAllOverlay() {
    return (
      <div className="column__list">
        {this.props.repositores.all.map((over, i) => (
          <OvItem over={over} title={title} />
        ))}
      </div>
    );
  }

  viewIncludeOverlays() {
    console.log(this.props.repositores.include);
    return (
      <div className="column__list">
        {this.props.repositores.include.map((over, i) => (
          <OvItem over={over} title={title} />
        ))}
      </div>
    );
  }
  viweategotyOverlays() {}
  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Оверлеи") {
        document.getElementById("pTitle").textContent = "Оверлеи";
      }
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    return (
      <div id="HomePage">
        {this.TitleView()}
        <div
          // className="btn-group"
          style={{
            display: "inline-flex",
            margin: "0px",
            marginTop: "20px",
            fontSize: "1.2em"

            // color: "#000"
          }}
        >
          {this.menuButton.map((it, p) => (
            <div
              style={this.menuBtn}
              onClick={() =>
                ReactDOM.render(
                  this.menuButton[p].handler(),
                  document.getElementById("listOve")
                )
              }
            >
              {it.text}
            </div>
          ))}
        </div>
        <div id="listOve">{this.menuButton[0].handler()}</div>
      </div>
    );
  }
}
export default PageOverlays;