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,
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  quickAction = (action, requirePrompt) => {
    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 "mode":
        console.log("Sending 'mode' message...");
        this.props.socket.send('{"type":"mode","call":"request","data":{}}');
        break;
      default:
        console.log("Invalid action");
        break;
    }
  };

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

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

  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")}
              >
                <span>🔴 Power Off</span>
              </div>
              <div
                className="settings-button"
                onClick={() => this.quickAction("restart")}
              >
                <span>🟠 Restart</span>
              </div>
            </div>
          </div>
          <div className="settings-grid">
            <h2>💻Send Object:</h2>
            <div className="settings-gridInner"></div>
          </div>
          <div className="settings-grid">
            <h2>⚒️Credits:</h2>
            <div className="settings-gridInner"></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>Arm in Motion</span>
            </div>
            <div className="modal-body">
              <span>Please stay clear of the arm.</span>
            </div>
            <div className="modal-closeX" onClick={() => this.cancelAction()}>
              <span>Cancel Action</span>
            </div>
          </div>
        </Modal>
      </div>
    );
  }
}

{
  /* <div className="entry">
                <span className="entry-name">Cole Deck,</span>
                <span className="entry-position">Project Lead,</span>
                <a className="entry-links" href="https://deck.sh">
                  https://deck.sh
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Natorion Johnson,</span>
                <span className="entry-position">Lead PCB assembler,</span>
                <a
                  className="entry-links"
                  href="https://linkedin.com/in/NatorionJ"
                >
                  https://linkedin.com/in/NatorionJ
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Fannie Yu,</span>
                <span className="entry-position">
                  CAD Design, Fabrication Planner
                </span>
                <a
                  className="entry-links"
                  href="https://linkedin.com/in/fannieyu"
                >
                  https://linkedin.com/in/fannieyu
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Elias Frey Reschly,</span>
                <span className="entry-position">
                  Mechanical Design, Fabrication
                </span>
                <div className="entry-links"></div>
              </div>
              <div className="entry">
                <span className="entry-name">Scarlett Kadan,</span>
                <span className="entry-position">
                  Front-End Dev, UI/UX Designer,
                </span>
                <a className="entry-links" href="https://kadan.live">
                  https://kadan.live
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Lucas Ferguson,</span>
                <span className="entry-position">Front-End Dev,</span>
                <a
                  className="entry-links"
                  href="https://lucasferguson.webflow.io"
                >
                  https://lucasferguson.webflow.io
                </a>
              </div>
              <div className="entry">
                <span className="entry-name">Dustin Thomas,</span>
                <span className="entry-position">Back-End Dev,</span>
                <a className="entry-links" href="https://cptlobster.dev">
                  https://cptlobster.dev
                </a>
              </div> */
}
