import React, { Component } from "react";
import BeldenLogo from "../assets/images/belden-white.png";
import Modal from "react-modal";
import "../assets/stylesheets/settings.scss";

Modal.setAppElement("#root");

export default class SettingsComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      modalOpen_quickAction: false,
      modalOpacity: 0,
      action: "",
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  quickAction = (action, requirePrompt) => {
    if (requirePrompt) {
      this.openModal("modalOpen_quickAction", action);
    } else {
      this.quickActionPerform(action);
    }
  };

  quickActionPerform = (action) => {
    switch (action) {
      case "shutdown":
        console.log("Shutting down...");
        this.props.socket.send(
          '{"type":"shutdown","call":"request","data":{}}'
        );
        break;
      case "restart":
        console.log("Restarting...");
        this.props.socket.send('{"type":"restart","call":"request","data":{}}');
        break;
      case "home":
        console.log("Homing...");
        this.props.socket.send('{"type":"home","call":"request","data":{}}');
        break;
      default:
        console.log("Invalid action");
        break;
    }
  };

  openModal = (modal, action) => {
    this.setState({ [modal]: true }, () => {
      setTimeout(() => this.setState({ modalOpacity: 1 }), 100);
    });
    this.setState({ action });
  };

  closeModal = (modal) => {
    this.setState({ modalOpacity: 0 }, () => {
      setTimeout(() => this.setState({ [modal]: false }), 300);
    });
  };

  performActionCloseModal = () => {
    console.log("Performing action: " + this.state.action);
    this.quickActionPerform(this.state.action);
    this.closeModal("modalOpen_quickAction");
  };

  sendObject = () => {
    const object = document.getElementById("sendobject").value;
    console.log("Sending object: " + object);
    this.props.socket.send
      ? this.props.socket.send(object)
      : console.log("No socket connection");
  };

  render() {
    const { modalOpen_quickAction, modalOpacity } = this.state;

    const modalStyle = {
      content: {
        opacity: modalOpacity,
        transition: "opacity 300ms ease-in-out",
        top: "50%",
        left: "50%",
        right: "auto",
        bottom: "auto",
        marginRight: "-50%",
        width: "auto",
        height: "auto",
        transform: "translate(-50%, -50%)",
        overflow: "hidden",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: "20px",
        background:
          "linear-gradient(-30deg, rgb(187, 194, 236) 0%, rgba(255, 255, 255, 1) 100%)",
        boxShadow: "0 0 20px rgba(0, 0, 0, 0.5)",
        minWidth: "30%",
        minHeight: "30%",
      },
      overlay: {
        opacity: modalOpacity,
        transition: "opacity 300ms ease-in-out",
        backgroundColor: "rgba(255, 255, 255, 0.15)",
        backdropFilter: "blur(5px)",
      },
    };

    return (
      <div className="settings">
        <div className="settings-image">
          <img src={BeldenLogo} alt="Belden" />
        </div>
        <div className="settings-fieldContainer">
          <h1 className="settings-title">⚙️ Settings</h1>
          <div className="settings-grid">
            <h2>⚡Quick Actions:</h2>
            <div className="settings-gridInner">
              <div
                className="settings-button"
                onClick={() => this.quickAction("shutdown", true)}
              >
                <span>🔴 Power Off</span>
              </div>
              <div
                className="settings-button"
                onClick={() => this.quickAction("restart", false)}
              >
                <span>🟠 Restart</span>
              </div>
              <div
                className="settings-button"
                onClick={() => this.quickAction("home", false)}
              >
                <span>🏠 Home Arm</span>
              </div>
            </div>
          </div>
          <div className="settings-grid">
            <h2>💻Send Object:</h2>
            <div className="settings-gridInner">
              <form className="settings-form">
                <input
                  id="sendobject"
                  type="text"
                  name="sendobject"
                  placeholder={`{"type":"cable_map","call":"request","data":{}}`}
                />
                <div
                  className="settings-button"
                  id="sendobjectButton"
                  onClick={() => this.sendObject()}
                >
                  <span>Send</span>
                </div>
              </form>
            </div>
          </div>
          <div className="settings-grid">
            <h2>⚒️Credits:</h2>
            <div id="creditsgrid" className="settings-gridInner">
              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_cole.jpg")}
                    alt="Cole Deck"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_cole.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Cole Deck</h2>
                  <h3>Project Lead</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_scarlett.jpg")}
                    alt="Scarlett Kadan"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_scarlett.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Scarlett Kadan</h2>
                  <h3>Lead Front-End Dev, UI/UX Designer</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_natorion.jpg")}
                    alt="Natorion Johnson"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_natorion.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Natorion Johnson</h2>
                  <h3>Lead PCB assembler</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_fannie.jpeg")}
                    alt="Fannie Yu"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_fannie.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Fannie Yu</h2>
                  <h3>CAD Design, Fabrication Planner</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_elias.jpg")}
                    alt="Elias Reschly"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_elias.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Elias Reschly</h2>
                  <h3>Mechanical Design, Fabrication</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_lucas.jpg")}
                    alt="Lucas Ferguson"
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_lucas.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Lucas Ferguson</h2>
                  <h3>Front-End Dev</h3>
                </div>
              </div>

              <div className="entry">
                <div className="entry-image">
                  <img
                    className="entry-img"
                    src={require("../assets/images/pic_dustin.jpg")}
                    alt=""
                  />
                  <div className="entry-qr">
                    <img
                      src={require("../assets/images/qr_dustin.png")}
                      alt="QR"
                    />
                  </div>
                </div>
                <div className="entry-title">
                  <h2>Dustin Thomas</h2>
                  <h3>Back-End Dev</h3>
                </div>
              </div>
            </div>
          </div>
        </div>

        <Modal
          isOpen={modalOpen_quickAction}
          contentLabel="show"
          onRequestClose={() => this.closeModal("modalOpen_quickAction")}
          style={modalStyle}
        >
          <div className="modal-container">
            <div className="modal-title">
              <span>⚠️</span>
              <span>Warning</span>
            </div>
            <div className="modal-body">
              <span>Are you sure you want to perform this quick action?</span>
            </div>
            <div className="modal-tray">
              <div
                className="modal-return"
                onClick={() =>
                  this.performActionCloseModal("modalOpen_quickAction")
                }
              >
                <span>Continue</span>
              </div>
              <div
                className="modal-return"
                onClick={() => this.closeModal("modalOpen_quickAction")}
              >
                <span>Cancel</span>
              </div>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}
