import type { DetailedHTMLProps, HTMLAttributes } from "react";
import type { MirisCamera, MirisGroup, MirisScene, MirisStream } from "./dist/components";

type MirisHTMLAttributes<T> = DetailedHTMLProps<HTMLAttributes<T>, T>;

// position, rotation, and scale are defined as non-writable frozen objects on
// MirisPrimitive (Three.js-style {x,y,z} vectors). React 19 detects them via
// `key in element` and tries direct property assignment, which throws.
// Use ref + setAttribute for these: ref={(el) => el?.setAttribute("position", "0 0 1")}

interface MirisSceneAttributes extends MirisHTMLAttributes<MirisScene> {
  "viewer-key"?: string;
  exposure?: number | string;
}

interface MirisStreamAttributes extends MirisHTMLAttributes<MirisStream> {
  uuid?: string;
  "viewer-key"?: string;
  "auth-token"?: string;
  "drm-key"?: string;
  controls?: boolean;
  disabled?: boolean;
  zoom?: number | string;
}

interface MirisCameraAttributes extends MirisHTMLAttributes<MirisCamera> {
  controls?: boolean;
  zoom?: number | string;
}

interface MirisGroupAttributes extends MirisHTMLAttributes<MirisGroup> {
  zoom?: number | string;
}

declare module "react" {
  namespace JSX {
    interface IntrinsicElements {
      "miris-scene": MirisSceneAttributes;
      "miris-stream": MirisStreamAttributes;
      "miris-camera": MirisCameraAttributes;
      "miris-group": MirisGroupAttributes;
    }
  }
}
