import React from "react";
import ReactDOM from "react-dom";
import MainPage from "..//../pages/main";
import "./style.css";
class FullCard extends React.Component {
  ui = {
    name: "Имя",
    category: "Категория:",
    versions: "Доступные версии",
    uses: " USE:",
    decription: "Описание:",
    site: "Сайт:",
    button: {
      text: "Установить"
    }
  };
  toBack() {
    ReactDOM.render(
      <MainPage icons={this.props.icons} rec={this.props.PropMain} />,
      document.getElementById("HomePage")
    );
  }
  checkVersion(item) {
    console.log(item.split("[U]")[1] === "");
    if (item.split("[U]")[1] === "") {
      return (
        <li
          key={item}
          id={item}
          style={{ background: "green", color: "#FFF", marginLeft: "5px" }}
        >
          {item.split("[U]")[0]}
        </li>
      );
    } else {
      return (
        <li
          key={item}
          id={item}
          style={{ background: "#F00", color: "#FFF", marginLeft: "5px" }}
        >
          {item.split("[M]")[0]}
        </li>
      );
    }
  }
  render() {
    return (
      <div className="fullCard">
        <div style={{ padding: "20px" }} onClick={() => this.toBack()}>
          BaCk
        </div>

        <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) => (
                <span key={u} id={u}>
                  {u}
                </span>
              ))}
            </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.button.text}
                </span>
              </strong>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default FullCard;