import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import cable from "../utils/Cable";
import "../assets/stylesheets/map.scss";
import { NavLink } from "react-router-dom";
import "animate.css";

export default class MapComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cableList: [],
      selected: "0",
      cable: new cable(
        "...",
        "0",
        "...",
        "...",
        "...",
        "...",
        "...",
        "...",
        "..."
      ),
    };
  }

  componentDidMount() {
    this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
    this.props.socket.addEventListener("message", this.handleMessage);
  }

  handleMessage = (event) => {
    try {
      const message = JSON.parse(event.data);
      const list = this.browseParse(message);
      this.setState({ cableList: list });
      setTimeout(() => {
        this.select("0");
        this.updateSelection();
      }, 50);
    } catch (error) {}
  };

  updateSelection() {
    const cableList = this.state.cableList;
    for (let i = 0; i < 54; i++) {
      let cable = cableList[i];
      if (cable === undefined) {
        try {
          document.getElementById("inner-" + i).style.border =
            "#bdbdbd 4px solid";
          document.getElementById("text-" + i).style.color = "#bdbdbd";
        } catch (error) {
          console.error("Error updating selection:", error);
        }
      }
    }
  }

  browseParse(message) {
    let cableList = [];
    let map = message.data.map;
    for (let i = 0; i < map.length; i++) {
      let part_number = map[i].part_number;
      let image = map[i].image;
      let position = map[i].position;
      let name = map[i].name;
      let brand = map[i].brand;
      let description = map[i].description;
      let short_description = map[i].short_description;
      let category = map[i].category;
      let application = map[i].application;
      cableList.push(
        new cable(
          part_number,
          position,
          name,
          brand,
          description,
          short_description,
          image,
          category,
          application
        )
      );
    }
    return cableList;
  }

  componentWillUnmount() {
    this.props.socket.removeEventListener("message", this.handleMessage);
  }

  renderCircle(id, color) {
    return (
      <div
        className="map-box-circle"
        id={"circle-" + id}
        onClick={() => this.select(id)}
      >
        <div
          className="map-box-circle-inner"
          id={"inner-" + id}
          style={{ border: `${color} 4px solid` }}
        >
          <span id={"text-" + id}>{parseInt(id) + 1}</span>
        </div>
      </div>
    );
  }

  select = (id) => {
    let cable = this.state.cableList[id];
    if (cable === undefined) {
      return;
    }

    let { selected } = this.state;
    try {
      document.getElementById("inner-" + selected).style.border =
        "#004990 4px solid";
      document.getElementById("text-" + selected).style.color = "#004990";
      this.setState({ selected: id });
      document.getElementById("inner-" + id).style.border = "#007cbe 4px solid";
      document.getElementById("text-" + id).style.color = "#007cbe";
    } catch (error) {
      console.error("Error selecting cable:", error);
    }

    let cab = this.state.cableList[id];
    this.setState({ cable: cab });
  };

  render() {
    let { cable } = this.state;
    return (
      <div className="map">
        <div className="map-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="map-fieldContainer">
          <h1 className="map-title">🗺️ Map</h1>
          <div className="map-boxContainer">
            <div className="map-box">
              <div className="map-box-row" id="row-1">
                {this.renderCircle("0", "#004990")}
                {this.renderCircle("1", "#004990")}
                {this.renderCircle("2", "#004990")}
                {this.renderCircle("3", "#004990")}
                {this.renderCircle("4", "#004990")}
              </div>
              <div className="map-box-row" id="row-2">
                {this.renderCircle("5", "#004990")}
                {this.renderCircle("6", "#004990")}
                {this.renderCircle("7", "#004990")}
                {this.renderCircle("8", "#004990")}
                {this.renderCircle("9", "#004990")}
                {this.renderCircle("10", "#004990")}
              </div>
              <div className="map-box-row" id="row-3">
                {this.renderCircle("11", "#004990")}
                {this.renderCircle("12", "#004990")}
                {this.renderCircle("13", "#004990")}
                {this.renderCircle("14", "#004990")}
                {this.renderCircle("15", "#004990")}
                {this.renderCircle("16", "#004990")}
                {this.renderCircle("17", "#004990")}
              </div>
              <div className="map-box-row" id="row-4">
                {this.renderCircle("18", "#004990")}
                {this.renderCircle("19", "#004990")}
                {this.renderCircle("20", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("21", "#004990")}
                {this.renderCircle("22", "#004990")}
                {this.renderCircle("23", "#004990")}
              </div>
              <div className="map-box-row" id="row-5">
                {this.renderCircle("24", "#004990")}
                {this.renderCircle("25", "#004990")}
                {this.renderCircle("26", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("27", "#004990")}
                {this.renderCircle("28", "#004990")}
                {this.renderCircle("29", "#004990")}
              </div>
              <div className="map-box-row" id="row-6">
                {this.renderCircle("30", "#004990")}
                {this.renderCircle("31", "#004990")}
                {this.renderCircle("32", "#004990")}
                <div className="map-box-spacer"></div>
                <div className="map-box-spacer"></div>
                {this.renderCircle("33", "#004990")}
                {this.renderCircle("34", "#004990")}
                {this.renderCircle("35", "#004990")}
              </div>
              <div className="map-box-row" id="row-7">
                {this.renderCircle("36", "#004990")}
                {this.renderCircle("37", "#004990")}
                {this.renderCircle("38", "#004990")}
                {this.renderCircle("39", "#004990")}
                {this.renderCircle("40", "#004990")}
                {this.renderCircle("41", "#004990")}
                {this.renderCircle("42", "#004990")}
              </div>
              <div className="map-box-row" id="row-8">
                {this.renderCircle("43", "#004990")}
                {this.renderCircle("44", "#004990")}
                {this.renderCircle("45", "#004990")}
                {this.renderCircle("46", "#004990")}
                {this.renderCircle("47", "#004990")}
                {this.renderCircle("48", "#004990")}
              </div>
              <div className="map-box-row" id="row-9">
                {this.renderCircle("49", "#004990")}
                {this.renderCircle("50", "#004990")}
                {this.renderCircle("51", "#004990")}
                {this.renderCircle("52", "#004990")}
                {this.renderCircle("53", "#004990")}
              </div>
            </div>
            <div className="map-details">
              <div className="map-cable-label">
                <img
                  className="map-cable-image"
                  src={cable.image}
                  alt="Cable"
                />
                <div className="map-cable-name">{cable.name}</div>
                <div className="map-cable-shortdescription">
                  {cable.short_description}
                </div>

                <div className="map-cable-description">{cable.description}</div>
                {cable.category ? (
                  <div className="map-cable-category">
                    <span
                      style={{ color: "black", backgroundColor: "transparent" }}
                    >
                      Category:{" "}
                    </span>
                    {cable.category}
                  </div>
                ) : null}
                <div className="map-cable-brand">
                  <span
                    style={{ color: "black", backgroundColor: "transparent" }}
                  >
                    Brand:{" "}
                  </span>
                  {cable.brand}
                </div>
                <div className="map-cable-position">
                  <span
                    style={{ color: "black", backgroundColor: "transparent" }}
                  >
                    Position:{" "}
                  </span>
                  {parseInt(cable.position) + 1}
                </div>
              </div>
              <NavLink
                to={"/map/cable/" + cable.position}
                className="map-cable-moreinfo"
              >
                <span>More Info</span>
              </NavLink>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
