import electron from "electron";
import React, { useState } from "react";
import { Dialog, DialogType, DialogFooter } from "@fluentui/react/lib/Dialog";
import { DefaultButton } from "@fluentui/react/lib/Button";
import { ThemeProvider, PartialTheme } from "@fluentui/react/lib/Theme";
import { ComboBox, IComboBoxOption } from "@fluentui/react/lib/ComboBox";
import SerialPort from "serialport";
import { useAppDispatch, useAppSelector } from "../redux/hooks";
import { connect, disconnect, setSerialPort } from "../redux/slices/serialConnectionSlice";

type Proptypes = {
}
const dialogStyles = { main: { maxWidth: 450 } };

const myTheme: PartialTheme = {
  palette: {
    themePrimary: "#0078d4",
    themeLighterAlt: "#eff6fc",
    themeLighter: "#deecf9",
    themeLight: "#c7e0f4",
    themeTertiary: "#71afe5",
    themeSecondary: "#2b88d8",
    themeDarkAlt: "#106ebe",
    themeDark: "#005a9e",
    themeDarker: "#004578",
    neutralLighterAlt: "#282828",
    neutralLighter: "#313131",
    neutralLight: "#3f3f3f",
    neutralQuaternaryAlt: "#484848",
    neutralQuaternary: "#4f4f4f",
    neutralTertiaryAlt: "#6d6d6d",
    neutralTertiary: "#c8c8c8",
    neutralSecondary: "#d0d0d0",
    neutralPrimaryAlt: "#dadada",
    neutralPrimary: "#ffffff",
    neutralDark: "#f4f4f4",
    black: "#f8f8f8",
    white: "#1f1f1f",
  },
};

const modalProps = {
  titleAriaId: "labelId",
  subtitleAriaId: "subTextId",
  isBlocking: false,
  styles: dialogStyles,
};
const dialogContentProps = {
  type: DialogType.close,
  title: "Settings",
  closeButtonAriaLabel: "Close",
};

const options: IComboBoxOption[] = [
];

const fetchPorts = async () => {
  const data = await SerialPort.list();
  options.splice(0, options.length);
  data.forEach((comPort) => { options.push({ key: comPort.path, text: comPort.path }); });
};

const Settings: React.FC<Proptypes> = () => {
  const [hidden, setHidden] = useState(true);
  const ipcHandler = () => {
    setHidden(false);
  };
  electron.ipcRenderer.on("show-settings", ipcHandler);
  const dispatch = useAppDispatch();
  const handlePortChange = async (option: IComboBoxOption | undefined) => {
    if (option !== null && option !== undefined) {
      dispatch(setSerialPort(option.key.toString()));
    }
  };
  fetchPorts();
  const selector = useAppSelector((state) => state);
  console.log(selector.serialConnection.port);
  return (
    <ThemeProvider theme={myTheme}>
      <Dialog
        hidden={hidden}
        onDismiss={() => { setHidden(true); }}
        dialogContentProps={dialogContentProps}
        modalProps={modalProps}
      >
        <ComboBox
          label="COM Port"
          options={options}
          onMenuOpen={() => { fetchPorts(); }}
          onChange={(_, option) => { handlePortChange(option); }}
          selectedKey={selector.serialConnection.port}
          disabled={selector.serialConnection.status.connected}
        />

        <DialogFooter>
          <DefaultButton primary disabled={selector.serialConnection.status.connected} onClick={() => { dispatch(connect()); }} text="Connect" />
          <DefaultButton disabled={!selector.serialConnection.status.connected} onClick={() => { dispatch(disconnect()); }} text="Disconnect" />
        </DialogFooter>
      </Dialog>
    </ThemeProvider>
  );
};

export default Settings;