import { getCurrentWindow } from "@tauri-apps/api/window";

const S = 8; // grab zone size in px

type ResizeDirection =
    | "North"
    | "East"
    | "South"
    | "West"
    | "NorthEast"
    | "SouthEast"
    | "SouthWest"
    | "NorthWest";

const handles: { edge: ResizeDirection; style: React.CSSProperties }[] = [
  { edge: "North",     style: { top: 0,  left: S,  right: S,  height: S, cursor: "n-resize"  } },
  { edge: "South",     style: { bottom: 0, left: S, right: S, height: S, cursor: "s-resize"  } },
  { edge: "West",      style: { top: S,  left: 0,  bottom: S, width: S,  cursor: "w-resize"  } },
  { edge: "East",      style: { top: S,  right: 0, bottom: S, width: S,  cursor: "e-resize"  } },
  { edge: "NorthWest", style: { top: 0,  left: 0,  width: S,  height: S, cursor: "nw-resize" } },
  { edge: "NorthEast", style: { top: 0,  right: 0, width: S,  height: S, cursor: "ne-resize" } },
  { edge: "SouthWest", style: { bottom: 0, left: 0, width: S, height: S, cursor: "sw-resize" } },
  { edge: "SouthEast", style: { bottom: 0, right: 0,width: S, height: S, cursor: "se-resize" } },
];

export default function ResizeHandles() {
  const win = getCurrentWindow();

  return (
    <>
      {handles.map(({ edge, style }) => (
        <div
          key={edge}
          onMouseDown={e => { if (e.button === 0) win.startResizeDragging(edge); }}
          style={{ position: "fixed", zIndex: 9999, ...style }}
        />
      ))}
    </>
  );
}
