import React from "react";
import Accordion from "../Componets/Acardion";
import CheckField from "../Componets/CheckField";

//import Menu from "../Componets/menu";
/*const menuItm = [
  { name: "portage", text: "portage", url: "/sport" },
  { name: "webpp", text: "App", url: "/app" }
];*/
class PageSettings extends React.Component {
  settings = {
    USE: [],
    lang: "RU"
  };
  styleUseinfo = {
    mobile: {
      position: "fixed",
      bottom: "0px",
      left: "0px",
      width: "100vw",
      background: "#FFF",
      borderTop: "1px  solid #CDC",
      paddingTop: "5px"
    },
    nomob: { margin: "5px" }
  };
  langs = [
    { title: "RU", link: "" },
    { title: "EN", link: "" },
    { title: "DE", link: "" }
  ];

  isMobile() {
    try {
      document.createEvent("TouchEvent");
      return true;
    } catch (e) {
      return false;
    }
  }
  changLang(lang) {
    console.log(lang);
    if (
      document.getElementById(lang).style.background !== "#0F0" ||
      document.getElementById(lang).style.background !== "rgb(0, 255, 0)"
    ) {
      document.getElementById(lang).style.background = "#0F0";

      document.getElementById(this.settings.lang).style.background = "#FFF";
      this.settings.lang = lang;
      //document.getElementById(lang).style.background = "#FFF";

      //this.IntstallPackageParamms.USE.map((us, i)=>(
      //  if( us== use)this.IntstallPackageParamms.USE[i].delete
      //))
    } else {
      document.getElementById(lang).style.background = "#0F0";
      this.settings.lang = lang;
      //this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
    }
    console.log(this.settings);
  }

  addUse(use) {
    console.log(use);
    if (
      document.getElementById(use).style.background === "#0F0" ||
      document.getElementById(use).style.background === "rgb(0, 255, 0)"
    ) {
      document.getElementById(use).style.background = "#FFF";
      //this.IntstallPackageParamms.USE.map((us, i)=>(
      //  if( us== use)this.IntstallPackageParamms.USE[i].delete
      //))
    } else {
      document.getElementById(use).style.background = "#0F0";
      //this.settings.USE[this.IntstallPackageParamms.USE.length + 1] = use;
    }
    console.log(this.settings);
  }
  VuseInfo(uId, use) {
    //console.log(typeof(use));
    console.log(uId);
    //console.log(Object.keys(this.props.uses));

    if (use in this.props.uses) {
      document.getElementById("useInfo").textContent = use;
      //document.getElementById(uId).style.background = "orange";
      //alert(this.props.useDes[use]);
    } else {
      document.getElementById("useInfo").textContent = use;
    }
    //document.getElementById("useInfo").textContent = use;
  }
  TitleView() {
    try {
      if (document.getElementById("pTitle").textContent !== "Настройки") {
        document.getElementById("pTitle").textContent = "Настройки";
      }
    } catch (e) {
      console.log(e);
    }
  }

  render() {
    this.TitleView();
    return (
      <div id="HomePage" className="settings">
        <div>
          <h3>UI</h3>
          <hr />
          <div>
            <span>Тема</span>
            <ul className="btn-group">{}</ul>
          </div>
          <div>
            <Accordion title={"Язык"}>
              <ul
                style={{ display: "inline-flex", listStyle: "none" }}
                className="btn-group"
              >
                {Object.keys(this.langs).map((lng) => (
                  <li
                    id={this.langs[lng].title}
                    style={{ marginLeft: "10px" }}
                    onClick={() => this.changLang(this.langs[lng].title)}
                  >
                    {this.langs[lng].title}
                  </li>
                ))}
              </ul>
            </Accordion>
          </div>
        </div>
        <Accordion title={"Сервер"}>
          <p>
            Адресс сервера <input type="text" placeholder="loaclhost:8000" />{" "}
          </p>
        </Accordion>
        <Accordion title={"Portage"}>
          <CheckField
            text={"Искать в оврелях"}
            checking={true}
            id={"searchOverlays"}
          />
          <CheckField
            text={"Устанавливать бинарные пакеты"}
            checking={true}
            id={"statrBinInstlPKg"}
          />

          <div className="sUse">
            <Accordion title={"USE"} className="sUses">
              {Object.keys(this.props.uses).map((u, j) => (
                <span
                  key={u}
                  id={u}
                  onMouseOver={() => this.VuseInfo(u, this.props.uses[u])}
                  onClick={() => this.addUse(u)}
                >
                  {u}
                </span>
              ))}
              <b>
                <div
                  id="useInfo"
                  className="useInfo"
                  style={
                    this.isMobile ? this.styleUseinfo.mobile : this.style.nomob
                  }
                ></div>
              </b>
            </Accordion>
          </div>
        </Accordion>
      </div>
    );
  }
}
export default PageSettings;