import React, { useEffect, useRef } from 'react'
import { useSelectedFloorItem, useZoneAssetId } from '../../../store/store';
import * as THREE from "three";
import { useThree } from '@react-three/fiber';
import * as Types from "../../../types/world/worldTypes";
export default function ZoneAssets() {
    const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
    const { setSelectedFloorItem } = useSelectedFloorItem();
    const { raycaster, controls, scene }: any = useThree();
    useEffect(() => {
        // console.log('zoneAssetId: ', zoneAssetId);
        if (!zoneAssetId) return
        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
        if (AssetMesh) {
            const bbox = new THREE.Box3().setFromObject(AssetMesh);
            const size = bbox.getSize(new THREE.Vector3());
            const center = bbox.getCenter(new THREE.Vector3());

            const front = new THREE.Vector3(0, 0, 1);
            AssetMesh.localToWorld(front);
            front.sub(AssetMesh.position).normalize();

            const distance = Math.max(size.x, size.y, size.z) * 2;
            const newPosition = center.clone().addScaledVector(front, distance);

            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
            controls.setTarget(center.x, center.y, center.z, true);
            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });

            setSelectedFloorItem(AssetMesh);
        } else {
            if (Array.isArray(zoneAssetId.position) && zoneAssetId.position.length >= 3) {
                let selectedAssetPosition = [
                    zoneAssetId.position[0],
                    10,
                    zoneAssetId.position[2]
                ];
                let selectedAssetTarget = [
                    zoneAssetId.position[0],
                    zoneAssetId.position[1],
                    zoneAssetId.position[2]
                ];
                const setCam = async () => {
                    await controls?.setLookAt(...selectedAssetPosition, ...selectedAssetTarget, true);
                    setTimeout(() => {
                        let AssetMesh = scene.getObjectByProperty("uuid", zoneAssetId.id);
                        if (AssetMesh) {
                            const bbox = new THREE.Box3().setFromObject(AssetMesh);
                            const size = bbox.getSize(new THREE.Vector3());
                            const center = bbox.getCenter(new THREE.Vector3());

                            const front = new THREE.Vector3(0, 0, 1);
                            AssetMesh.localToWorld(front);
                            front.sub(AssetMesh.position).normalize();

                            const distance = Math.max(size.x, size.y, size.z) * 2;
                            const newPosition = center.clone().addScaledVector(front, distance);

                            controls.setPosition(newPosition.x, newPosition.y, newPosition.z, true);
                            controls.setTarget(center.x, center.y, center.z, true);
                            controls.fitToBox(AssetMesh, true, { cover: true, paddingTop: 5, paddingLeft: 5, paddingBottom: 5, paddingRight: 5, });

                            setSelectedFloorItem(AssetMesh);
                        }
                    }, 500)

                };
                setCam();
            }
        }
    }, [zoneAssetId, scene, controls])



    return (
        <>
        </>
    )
}