"use client"
import { CardButton } from "@/components/test/CardButton";
import { useGlobalShortcut } from "@/hooks/tauri/shortcuts";
import { invoke } from "@tauri-apps/api/core";
import { useCallback, useState } from "react";

export default function Page() {
  const [buttonDesc, setButtonDesc] = useState<string>(
    "Waiting to be clicked. This calls 'on_button_clicked' from Rust."
  );
  const onButtonClick = () => {
    invoke<string>("on_button_clicked")
      .then((value) => {
        setButtonDesc(value);
      })
      .catch(() => {
        setButtonDesc("Failed to invoke Rust command 'on_button_clicked'");
      });
  };

  const shortcutHandler = useCallback(() => {
    console.log("Ctrl+P was pressed!");
  }, []);
  useGlobalShortcut("CommandOrControl+P", shortcutHandler);

  return (
    <div className="flex flex-col">
      <main className="flex flex-col items-center justify-center flex-1 py-8">
        <h1 className="m-0 text-6xl text-center">
          Welcome to{" "}
          <a
            href="https://nextjs.org"
            target="_blank"
            rel="noopener noreferrer"
            className="text-blue-600 hover:underline focus:underline active:underline"
          >
            Next.js!
          </a>
        </h1>

        <p className="my-12 text-2xl leading-9 text-center">
          Get started by editing{" "}
          <code className="p-2 font-mono text-xl bg-gray-200 rounded-md">
            src/pages/index.tsx
          </code>
        </p>

        <div className="flex flex-wrap items-center justify-center max-w-3xl">
          <CardButton
            onClick={onButtonClick}
            title="Tauri Invoke"
            description={buttonDesc}
          />
        </div>
      </main>
    </div>
  );
}
