import ReactDOM from "react-dom"
import React from "react"

import { ARCanvas, ARMarker } from "@artcom/react-three-arjs"

ReactDOM.render(
  <ARCanvas
    camera={ { position: [0, 0, 0] } }
    onCreated={ ({ gl }) => {
      gl.setSize(window.innerWidth, window.innerHeight)
    } }>
    <ambientLight />
    <pointLight position={ [10, 10, 0] }  />
    <ARMarker
      type={ "pattern" }
      patternUrl={ "data/hiro.patt" }>
      <mesh>
        <boxBufferGeometry args={ [1, 1, 1] } />
        <meshStandardMaterial color={ "green" } />
      </mesh>
    </ARMarker>
  </ARCanvas>,
  document.getElementById("root")
)

<ARCanvas
  children                                        // regular children
  arEnabled                                       // if false, it will render children into <Canvas /> without AR context
  tracking                                        // if false, it will stop tracking
  patternRatio = 0.5                              // passed to arToolkit context ¹
  detectionMode = "mono_and_matrix"               // passed to arToolkit context ¹
  cameraParametersUrl = "data/camera_para.dat"    // passed to arToolkit context ¹
  matrixCodeType = "3x3"                          // passed to arToolkit context ¹
  onCameraStreamReady                             // callback which will be invoked when camera stream starts
  onCameraStreamError                             // callback which will be invoked when camera stream fails, e.g.: permissions
  sourceType = "webcam"                           // set camera source type, see ar.js code ²
  ...props                                        // props are passed to the r3f canvas ³
/>                                                

<ARMarker
  children                        // regular children
  type                            // arToolkit marker type, "barcode" or "pattern"
  barcodeValue                    // if type="barcode", its algorithmic value
  patternUrl                      // if type="pattern", a link to its pattern file
  params                          // object which accepts all marker settings ¹, e.g. params = {{ smooth: true }}
  onMarkerFound                   // callback which will be invoked when marker has been found
  onMarkerLost                    // callback which will be invoked when previously found marker has been lost
/>