import React from 'react'

import { Canvas, useLoader } from '@react-three/fiber'
import { Object3D, Vector3, TextureLoader } from "three";

import { Grid, Surface } from 'surface3dviewer'

Object3D.DefaultUp.set(0, 0, 1);

const scale = new Vector3(1, 1, 1)
const domains = {x: [0, 1], y: [0, 1], z: [0, 1]}

const SurfaceContainer = () => {

    const [map, depth] = useLoader(TextureLoader, ['./sinc.png', './sinc_gray.png'] )

    return <Suspense fallback={null}>
        <Grid scale={scale} domains={domains} ticks={15} />
        <Surface map={map} depth={depth} scale={scale} />
    </Suspense>
}

const App = ({scale, ticks, domains}: any) => {

    return <Canvas frameloop="demand" linear flat >
        <SurfaceContainer />
    </Canvas>