// 'use client'
// ==========================================================
// RESOURCES
// ** APOLLO CLIENT STORE+STATE Imports
import {
useApolloClient,
useReactiveVar,
} from '@apollo/client'
import {
isPreferencesDataSetVar,
preferencesDataVar,
preferencesStore,
canvasStateStore,
// isCanvasStatePaperSetVar,
// canvasStatePaperVar,
isCanvasStateThreeDSetVar,
canvasStateThreeDVar,
} from '#/lib/api/graphql/apollo'
// ** ZUSTAND (X?) // for cameras, lights, canvas props
// import { create } from 'zustand'
import { createStore } from 'zustand-x'
// ** REACT Imports
import {
Suspense,
useState,
useEffect,
useRef,
useTransition,
forwardRef,
useImperativeHandle,
} from 'react'
// ** THREE JS Imports
import * as THREE from 'three'
// ** R3F Imports
import {
Canvas,
// Camera, // use PerspectiveCamera from drei library
useFrame,
useThree,
// extend, // if using function extend({ OrbitControls })
useLoader,
} from '@react-three/fiber'
// ** QUESTION: do stuff with IMPORTS ??
// extend({ OrbitControls })
// ** R3F HELPERS Imports
import {
PerspectiveCamera,
// Environment, Stage,
// KeyboardControls,
// OrbitControls, TransformControls, PivotControls,
// GizmoHelper, GizmoViewcube, GizmoViewport,
// ContactShadows, BakeShadows,
// softShadows, // softShadows()
Preload,
Loader, useProgress,
Html, Center,
// useGLTF, useFBX,
} from '@react-three/drei'
// ** RADIX-UI Imports
// import * as Progress from '@radix-ui/react-progress'
// import * as Collapsible from '@radix-ui/react-collapsible'
// import * as Accordion from '@radix-ui/react-accordion'
// import {
// ChevronDownIcon,
// RowSpacingIcon,
// Cross2Icon,
// } from '@radix-ui/react-icons'
import {
Grid,
Flex,
Box,
Button,
Text,
} from '@radix-ui/themes'
// ** THREED Config
import {
Config,
INITIAL,
detailLevels,
modifyConfigsFromUrlParams,
getFocusFromUrlParams,
seasonProperties,
} from "#/lib/farmbot/threed-farmbot/config-threed"
import {
PrivateOverlay,
PublicOverlay,
ToolTip
} from "#/lib/farmbot/threed-farmbot/config_overlays"
// ** THREED EXPERIENCE Imports
// import ThreeDExperienceNew from '#/lib/ecctrl-new/example/Experience'
import ThreeDExperienceViewer from '#/lib/threed/components/canvas/ExperienceViewer'
// import { threedIO } from '#/lib/threed/threed.io/threedIO'
// import tunnel from 'tunnel-rat'
// import tunnel from '#/lib/threed/threed.io/tunnelrat'
// import { threedAI } from '#/lib/threed/threed.ai/threedAI'
// ** HELPER Components
import Spinner from '#/layout/ui/spinner'
// ** UUID Imports
import { v4 as newUUID } from 'uuid'
// ** COLORFUL CONSOLE MESSAGES (ccm)
import ccm from '#/lib/utils/console-colors'
// console.debug('%c ccm', ccm)
// ==============================================================
// ** INTERFACES + TYPES
interface IViewerProps {
// children: ReactNode,
_id: string, // = 'heyheyhey_' + newUUID(),
threeds: any[], // = [],
}
// ==============================================================
// ** VARIABLES
const debug = false // false | true // ts: boolean
const DEBUG = false // false | true // ts: boolean
// ** TUNNEL: THREEDIO
// const t = tunnel()
// const threedIO = tunnel()
// const threedOI = tunnel()
// Model interactive 'modes' using TransformControls
const actionModes = ['translate', 'rotate', 'scale']
// Progress example radix-ui simple
// function ThreeDLoaderSimple() {
// // ** using react-three-drei
// const { active, progress, errors, item, loaded, total } = useProgress()
// // ** using radix-ui
// // import React from 'react'
// // import * as Progress from '@radix-ui/react-progress'
// // import './styles.css'
// // const ProgressDisplay = () => {
// const [progressValue, setProgressValue] = useState(progress)
// useEffect(() => {
// const timer = setTimeout(() => setProgressValue(progress), 0)
// return () => clearTimeout(timer)
// }, [])
// // ** integrate drei with radix
// return (
//
//
// THREED UI LOADING... {Math.round(progress).toFixed(0)} %
//
//
//
// )
// // }
// // export default ProgressDisplay
// }
export function ThreeDLoaderMesh() {
const [scale, setScale] = useState(1)
const texture = useLoader(THREE.TextureLoader, "https://raw.githubusercontent.com/AaronClaes/my-site/main/public/react.webp")
const handleClick = () => setScale(p => p + 0.1)
return (
)
}
// ==========================================================
// CAMERA DATA INTERFACE (USING ZUSTAND SESSION STATE STORE)
// ==========================================================
// import { create } from 'zustand'
// const storeCameraZ = create(set => ({
// position: [0, 0, 0],
// setPosition: (position: number[]) => set({ position }),
// // cameraPosition: [-16, 4, -16],
// // setCameraPosition: (cameraPosition: number[]) => set({ cameraPosition })
// }))
// ** ZUSTAND-X : CAMERA STORE
// const storeCameraZ = createStore('threedCamera')(({
// position: [-1, 1, -1],
// // setPosition: (position: number[]) => set({ position }),
// // cameraPosition: [-16, 4, -16],
// // setCameraPosition: (cameraPosition: number[]) => set({ cameraPosition })
// }))
// // Note that the zustand(x) store is accessible through:
// // hook store
// storeCameraZ.useStore
// // vanilla store
// storeCameraZ.store
// // reactive (tracked) hooks
// storeCameraZ.useTracked.owner()
// // Getters
// // Don't overuse hooks. If you don't need to subscribe to the state, use instead the get method:
// storeCameraZ.get.name()
// storeCameraZ.get.stars()
// // You can also get the whole state object:
// storeCameraZ.get.state()
// **
// console.debug('%c storeCameraZ.get.state()', ccm.redAlert, storeCameraZ.get.state())
// console.debug('%c STORE storeCameraZ.get.state().position()', ccm.redAlert, storeCameraZ.get.position())
// console.debug('%c storeCameraZ.useTracked.position()', ccm.redAlert, storeCameraZ.useTracked.position())
// ==========================================================
// const controls = new OrbitControls(camera, renderer.domElement)
// camera.lookAt(0.5, 0.5, 0.5)
// controls.target.set(.5, .5, .5)
// controls.update()
// controls.addEventListener('change', () => console.debug('Controls Change'))
// controls.addEventListener('start', () => console.debug('Controls Start Event'))
// controls.addEventListener('end', () => console.debug('Controls End Event'))
// EXAMPLE ANIMATION using hook 'useFrame' (with 'useRef' references)
// function ActionRig() {
// return useFrame((state) => {
// // state.camera.position.x = THREE.MathUtils.lerp(state.camera.position.x, 1 + state.mouse.x / 4, 0.01)
// // state.camera.position.y = THREE.MathUtils.lerp(state.camera.position.y, 1.5 + state.mouse.y / 4, 0.01)
// })
// }
// ==========================================================
// ** NOTES on CAMERAS
// // CREATE THREED CAMERA
// let threedCamera = {
// position: new THREE.Vector3(-12, 4, -16),
// fov: 32,
// // near: 0.1,
// // far: 1000,
// }
// LINK 1: https://discourse.threejs.org/t/accessing-the-camera-in-react-three-fiber-out-of-the-canvas/39137/2
// LINK 2: https://discourse.threejs.org/t/accessing-the-camera-in-react-three-fiber-out-of-the-canvas/39137/4
// response: "not sure what you mean by outside, the camera only exists within the canvas..
// you can access it after the canvas has been created
//