import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import cable from "../utils/Cable";
import "../assets/stylesheets/browse.scss";

export default class BrowseComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      cableList: [],
      isLoading: true,
    };
  }

  componentDidMount() {
    this.props.socket.send('{"type":"cable_map","call":"request","data":{}}');
    this.props.socket.addEventListener("message", this.handleMessage);
    setTimeout(() => {
      this.setState({ isLoading: false });
    }, 500);
  }

  handleMessage = (event) => {
    //console.log("Got message!");
    try {
      const message = JSON.parse(event.data);
      const cableList = this.browseParse(message);
      this.setState({ cableList });
    } catch (error) {
      console.error("Error parsing message from server:", 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);
  }

  searchUpdate = () => {
    let value = document.querySelector(".browse-search input").value;
    this.props.socket.send(
      `{"type":"cable_search","call":"request","data":{"string":"${value}"}}`
    );
  };

  returnPlaceholder() {
    return (
      <div className="browse-cable">
        <div className="browse-cable-image" />
        <div className="browse-cable-label">
          <div className="browse-cable-name"></div>
          <div className="browse-cable-description"></div>
          <div className="browse-cable-brand"></div>
          <div className="browse-cable-position"></div>
        </div>
        <span className="browse-cable-arrow">{">"}</span>
      </div>
    );
  }

  render() {
    return (
      <div className="browse">
        <div className="browse-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="browse-fieldContainer">
          <h1 className="browse-title">🛍️ Browse</h1>
          <div className="browse-search">
            <input
              type="text"
              onChange={() => this.searchUpdate()}
              placeholder="🔎 Start typing to search..."
            />
          </div>
          {this.state.isLoading ? (
            <React.Fragment>
              {this.returnPlaceholder()}
              {this.returnPlaceholder()}
              {this.returnPlaceholder()}
              {this.returnPlaceholder()}
              {this.returnPlaceholder()}
              {this.returnPlaceholder()}
            </React.Fragment>
          ) : (
            this.state.cableList.map((cableObj, index) => (
              <React.Fragment key={index}>
                {cableObj.returnDiv()}
              </React.Fragment>
            ))
          )}
        </div>
      </div>
    );
  }
}