import React from "react";

import "./style.css";
class FullCard extends React.Component {
  ui = {
    name: "Имя",
    category: "Категория:",
    versions: "Доступные версии",
    uses: " USE:",
    decription: "Описание:",
    site: "Сайт:",

    InstallButton: {
      text: "Установить"
    }
  };
  IntstallPackageParamms = {
    NamePackage: this.props.PackageName.Name,
    Version: "",
    USE: []
  };

  addUse(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.IntstallPackageParamms.USE[
        this.IntstallPackageParamms.USE.length + 1
      ] = use;
    }
    console.log(this.IntstallPackageParamms);
  }
  addVersion(version) {
    console.log(typeof version);
    if (this.IntstallPackageParamms.Version !== "") {
      if (this.IntstallPackageParamms.Version !== version) {
        document.getElementById(
          this.IntstallPackageParamms.Version
        ).style.background = "#FFF";
        this.IntstallPackageParamms.Version = version;
        document.getElementById(
          version
        ).style.background = document
          .getElementById(version)
          .style.border.split("2px solid")[1];
      } else {
        document.getElementById(
          this.IntstallPackageParamms.Version
        ).style.background = "#FFF";
        this.IntstallPackageParamms.Version = "";
      }
    } else {
      this.IntstallPackageParamms.Version = version;
      document.getElementById(
        version
      ).style.background = document
        .getElementById(version)
        .style.border.split("2px solid")[1];
      console.log(this.IntstallPackageParamms);
    }
  }

  checkVersion(item) {
    //console.log(item.split("[U]")[1] === "");
    console
      .log
      //this.props.Ipkgthis.props.PackageName.Name.split("/")[1])
      ();

    if (item.split("[U]")[1] === "") {
      return (
        <li
          key={item}
          id={item.split("[U]")[0]}
          style={{ border: " 2px solid #0F0", marginLeft: "5px" }}
          onClick={() => this.addVersion(item.split("[U]")[0])}
        >
          {item.split("[U]")[0]}
        </li>
      );
    } else {
      return (
        <li
          key={item}
          id={item.split("[M]")[0]}
          style={{ border: "2px solid #F00", marginLeft: "5px" }}
          onClick={() => this.addVersion(item.split("[M]")[0])}
        >
          {item.split("[M]")[0]}
        </li>
      );
    }
  }

  VuseInfo(use) {
    //console.log(use);
    //console.log(this.props.useDes);
    //console.log(Object.keys(this.props.uses));
    //document.getElementById(uId).style.background = "orange";
    if (use in this.props.useDes || use.split("+")[1] in this.props.useDes) {
      if (use in this.props.useDes) {
        document.getElementById("useInfo").textContent = this.props.useDes[use];
        console.log(use);
      } else {
        document.getElementById("useInfo").textContent = this.props.useDes[
          use.split("+")[1]
        ];
        console.log(this.props.useDes[use.split("+")[1]]);
      }
      //document.getElementById(uId).style.background = "orange";
      //alert(this.props.useDes[use]);
    } else {
      document.getElementById("useInfo").textContent = use;
    }
    //document.getElementById("useInfo").textContent = use;
  }
  render() {
    return (
      <div className="fullCard">
        <div className=" sCard">
          <h1 className="title">{this.props.PackageName.Name.split("/")[1]}</h1>
          <hr />
          <img
            src={this.props.icons[this.props.PackageName.Name.split("/")[1]]}
            style={{ width: "128px", height: "128px" }}
          />
          <div style={{}}>
            <span>
              {" "}
              <b>{this.ui.category}</b>{" "}
              {this.props.PackageName.Name.split("/")[0]}
            </span>
            <ul className="cVer">
              <b>{this.ui.versions}:</b>
              {this.props.PackageName.version.map((v) => this.checkVersion(v))}
            </ul>
            <div className="sUse">
              <b>{this.ui.uses}</b>
              {this.props.PackageName.USE.map((u, j) => (
                <span
                  key={u}
                  id={u}
                  onMouseOver={() =>
                    this.VuseInfo(this.props.PackageName.USE[j])
                  }
                  onClick={() => this.addUse(this.props.PackageName.USE[j])}
                >
                  {u}
                </span>
              ))}
              <div>
                <b>Оверлеи:</b>
                <span>{this.props.PackageName.repo}</span>
              </div>
              <b>
                <div
                  id="useInfo"
                  className="useInfo"
                  style={{ marging: "5px" }}
                ></div>
              </b>
            </div>
            <div> </div>

            <p>
              <b>{this.ui.decription}</b> {this.props.PackageName.Description}
            </p>
            <a href={this.props.PackageName.Home_page}>{this.ui.site} </a>

            <div className="Btm">
              <strong>
                <span className="btn right" id={this.props.PackageName.Name}>
                  {this.ui.InstallButton.text}
                </span>
              </strong>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default FullCard;
