import React, { useState } from "react";
import { createGlobalStyle } from "styled-components";
// import { useDispatch } from "react-redux";
import Select from "react-select";
import SerialPort from "serialport";
import electron from "electron";
import KnobSection from "./Components/KnobSection";
import { useAppDispatch } from "./redux/hooks";
import { connect, disconnect, setSerialPort } from "./redux/slices/serialConnectionSlice";

const GlobalStyle = createGlobalStyle`
  html {
    border-style: solid;
    border-color: #363636;
    border-width: 1px;
    box-sizing: border-box;
    height: 100%;
    border-bottom-style: hidden;
    border-right-style: hidden;
  }
`;

const options: [{value: string, label:string}] = [{ value: "placeholder", label: "Select Port" }];

const fetchPorts = async () => {
  const data = await SerialPort.list();
  options.shift();
  data.forEach((comPort) => { options.push({ value: comPort.path, label: comPort.path }); });
};

const App = () => {
  const dispatch = useAppDispatch();

  fetchPorts();

  const [portSelectionValue, setPortSelectionValue] = useState(options[0]);
  const handlePortChange = async (selectedOption: any) => {
    setPortSelectionValue(selectedOption);
    dispatch(setSerialPort(selectedOption.value));
  };

  return (
    <div>
      <GlobalStyle />
      <KnobSection />
      <button
        type="button"
        onClick={() => {
          dispatch(connect());
        }}
      >
        connect
      </button>
      <button
        type="button"
        onClick={() => {
          dispatch(disconnect());
        }}
      >
        disconnect
      </button>
      <button
        type="button"
        onClick={() => {
          electron.ipcRenderer.send("asynchronous-message", "red");
        }}
      >
        tray red
      </button>
      <button
        type="button"
        onClick={() => {
          electron.ipcRenderer.send("asynchronous-message", "green");
        }}
      >
        tray green
      </button>
      <button
        type="button"
        onClick={() => {
          electron.ipcRenderer.send("asynchronous-message", "yellow");
        }}
      >
        tray yellow
      </button>
      <button
        type="button"
        onClick={() => {
          electron.ipcRenderer.send("asynchronous-message", "default");
        }}
      >
        tray default
      </button>
      <Select
        value={portSelectionValue}
        onChange={handlePortChange}
        options={options}
      />
    </div>
  );
};
export default App;