import { convertFileSrc } from "@tauri-apps/api/core";
import { openPath } from "@tauri-apps/plugin-opener";
import { useLongPress } from "ahooks";
import { type FC, useRef } from "react";
import type { App as AppProps } from "@/stores/app";
import { hidePanel } from "@/utils/nsPanel";

const App: FC<AppProps> = (props) => {
  const { name, icon, path } = props;
  const containerRef = useRef<HTMLDivElement>(null);

  const handleLongPress = () => {
    console.log("handleLongPress");
  };

  const openApp = () => {
    console.log("openApp");

    openPath(path);

    hidePanel();
  };

  useLongPress(handleLongPress, containerRef, {
    onClick: openApp,
  });

  return (
    <div
      className="grid place-items-center active:opacity-70"
      ref={containerRef}
    >
      <img alt={name} className="size-24" src={convertFileSrc(icon)} />

      <span className="truncate">{name}</span>
    </div>
  );
};

export default App;