WIP updates

src/components/form/BitwiseSelect.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from "react";
+
+import {
+  bitwiseDecode,
+  bitwiseEncode,
+  enumLike
+} from "@app/core/utils/bitwise.js";
+import { Listbox } from "@headlessui/react";
+import { Protobuf } from "@meshtastic/meshtasticjs";
+
+import { InfoWrapper } from "./InfoWrapper.js";
+
+export interface BitwiseSelectProps {
+  label?: string;
+  description?: string;
+  error?: string;
+  selected: number;
+  decodeEnun: enumLike;
+  onChange: (value: number) => void;
+}
+
+export const BitwiseSelect = ({
+  label,
+  description,
+  error,
+  selected,
+  decodeEnun,
+  onChange
+}: BitwiseSelectProps): JSX.Element => {
+  const [decodedSelected, setDecodedSelected] = useState<string[]>([]);
+
+  const options = Object.entries(decodeEnun)
+    .filter((value) => typeof value[1] !== "number")
+    .map((value) => {
+      return {
+        value: parseInt(value[0]),
+        label: value[1]
+          .toString()
+          .replace("POS_", "")
+          .toLowerCase()
+          .toLocaleUpperCase() //TODO: Investigate
+      };
+    });
+
+  React.useEffect(() => {
+    setDecodedSelected(
+      bitwiseDecode(selected, Protobuf.Config_PositionConfig_PositionFlags).map(
+        (flag) =>
+          Protobuf.Config_PositionConfig_PositionFlags[flag]
+            .replace("POS_", "")
+            .toLowerCase()
+      )
+    );
+  }, [selected]);
+
+  return (
+    <InfoWrapper label={label} description={description} error={error}>
+      <Listbox
+        value={bitwiseDecode(selected, decodeEnun)}
+        onChange={(value) => {
+          onChange(bitwiseEncode(value));
+        }}
+        multiple
+      >
+        <Listbox.Button
+          className={`flex h-10 w-full items-center gap-2 rounded-md border-transparent bg-orange-100 px-3 text-sm focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500`}
+        >
+          {decodedSelected.map((option) => (
+            <span className="rounded-md bg-orange-300 p-1">{option}</span>
+          ))}
+        </Listbox.Button>
+        <Listbox.Options>
+          {options.map((option) => (
+            <Listbox.Option key={option.value} value={option.value}>
+              {option.label}
+            </Listbox.Option>
+          ))}
+        </Listbox.Options>
+      </Listbox>
+    </InfoWrapper>
+  );
+};