import { useEffect } from "react";
import { LuCommand } from "react-icons/lu";

import { Button } from "@components/Button";
import Container from "@components/Container";
import { useMacrosStore } from "@/hooks/stores";
import useKeyboard from "@/hooks/useKeyboard";
import { useJsonRpc } from "@/hooks/useJsonRpc";
import { usePermissions } from "@/hooks/usePermissions";
import { Permission } from "@/types/permissions";

export default function MacroBar() {
  const { macros, initialized, loadMacros, setSendFn } = useMacrosStore();
  const { executeMacro } = useKeyboard();
  const { send } = useJsonRpc();
  const { permissions, hasPermission } = usePermissions();

  useEffect(() => {
    setSendFn(send);

    // Only load macros if user has permission to read settings
    if (!initialized && permissions[Permission.SETTINGS_READ] === true) {
      loadMacros();
    }
  }, [initialized, send, loadMacros, setSendFn, permissions]);

  // Don't show macros if user can't provide keyboard input or if no macros exist
  if (macros.length === 0 || !hasPermission(Permission.KEYBOARD_INPUT)) {
    return null;
  }

  return (
    <Container className="bg-white dark:bg-slate-900 border-b border-b-slate-800/20 dark:border-b-slate-300/20">
      <div className="flex items-center gap-x-2 py-1.5">
        <div className="absolute -ml-5">
          <LuCommand className="h-4 w-4 text-slate-500" />
        </div>
        <div className="flex flex-wrap gap-2">
          {macros.map(macro => (
            <Button
              key={macro.id}
              aria-label={macro.name}
              size="XS"
              theme="light"
              text={macro.name}
              onClick={() => executeMacro(macro.steps)}
            />
          ))}
        </div>
      </div>
    </Container>
  );
}