import React from "react";
import DefaultPartImg from "../assets/images/part.png";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/browse.scss";

export default class cable {
  constructor(
    part_number,
    position,
    name,
    brand,
    description,
    short_description,
    image,
    category,
    application
  ) {
    this.part_number = part_number;
    this.position = position;
    this.name = name;
    this.brand = brand;
    this.image = image ? `http://localhost${image}` : DefaultPartImg;

    this.category = category;
    this.application = application;
    this.short_description = short_description;
    this.description = description;

    if (short_description === undefined) {
      if (this.description !== undefined) {
        this.short_description = this.description;
      } else if (this.application !== undefined) {
        this.short_description = this.application;
      } else if (this.category !== undefined) {
        this.short_description = this.category;
      } else {
        this.short_description = "";
      }
    }

    if (this.short_description !== undefined) {
      this.short_description =
        this.short_description.charAt(0).toUpperCase() +
        this.short_description.slice(1);
      if (this.short_description.length > 80) {
        this.short_description =
          this.short_description.substring(0, 80) + "...";
      }
    }

    if (this.description !== undefined) {
      if (this.description.length > 200) {
        this.description = this.description.substring(0, 200) + "...";
      }
    }
  }

  returnDiv() {
    return (
      <NavLink className="browse-cable" to={"/browse/cable/" + this.position}>
        <img className="browse-cable-image" src={this.image} alt="Cable" />
        <div className="browse-cable-label">
          <div className="browse-cable-name">{this.name}</div>
          <div className="browse-cable-description">
            <span style={{ color: "#007cbe" }}></span>
            {this.short_description}
          </div>
          {this.category ? (
            <div className="browse-cable-category">
              <span style={{ color: "black", backgroundColor: "transparent" }}>
                Category:{" "}
              </span>
              {this.category}
            </div>
          ) : null}
          <div className="browse-cable-brand">
            <span style={{ color: "black", backgroundColor: "transparent" }}>
              Brand:{" "}
            </span>
            {this.brand}
          </div>
          <div className="browse-cable-position">
            <span style={{ color: "black", backgroundColor: "transparent" }}>
              Position:{" "}
            </span>
            {parseInt(this.position) + 1}
          </div>
        </div>
        <span className="browse-cable-arrow">{">"}</span>
      </NavLink>
    );
  }
}