import type React from "react";

import { useAppStore } from "@app/core/stores/appStore.js";
import { useDeviceStore } from "@app/core/stores/deviceStore.js";
import { Hashicon } from "@emeraldpay/hashicon-react";
import { PlusIcon } from "@heroicons/react/24/outline";

export const DeviceSelector = (): JSX.Element => {
  const { getDevices } = useDeviceStore();
  const { selectedDevice, setSelectedDevice } = useAppStore();

  return (
    <div className="flex h-full w-16 items-center whitespace-nowrap bg-slate-50 py-12 text-sm [writing-mode:vertical-rl]">
      <span className="font-mono text-slate-500">Connected Devices</span>
      <span className="mt-6 flex gap-4 font-bold text-slate-900">
        {getDevices().map((device) => (
          <div
            key={device.id}
            onClick={() => {
              setSelectedDevice(device.id);
            }}
            className="group flex h-8 w-8 cursor-pointer p-0.5 drop-shadow-md"
          >
            <Hashicon size={32} value={device.hardware.myNodeNum.toString()} />
            <div
              className={`absolute -left-1.5 h-7 w-0.5 rounded-full group-hover:bg-orange-300 ${
                device.id === selectedDevice
                  ? "bg-orange-400"
                  : "bg-transparent"
              }`}
            />
          </div>
        ))}
        <div
          onClick={() => {
            setSelectedDevice(0);
          }}
          className={`h-8 w-8 cursor-pointer rounded-md border-2 border-dashed p-2 hover:border-orange-300 ${
            selectedDevice === 0 ? "border-orange-400" : "border-slate-200"
          }`}
        >
          <PlusIcon />
        </div>
      </span>
      <img src="Logo_Black.svg" className="mt-auto px-3" />
    </div>
  );
};