import { ContextManager, Observable, registerLoadable } from "@zcomponent/core";
import { Group } from "@zcomponent/three/lib/components/Group";
import * as THREE from "three";

interface ConstructorProps {
    /**
     * The radius of the sphere to create
     * 
     * @zui
     * @zdefault 1
     */
    radius: number;
}

/**
 * @zcomponent
 * @zicon favorite
 */
export class CustomThreeJSComponent extends Group {

	public material = new THREE.MeshBasicMaterial();

    /**
     * @zui
     * @zdefault [1, 1, 1]
     * @ztype color-norm-rgb
     */
    public color = new Observable([1, 1, 1], v => this.material.color.setRGB(...v));

    constructor(contextManager: ContextManager, public constructorProps: ConstructorProps) {
        super(contextManager, constructorProps);

        registerLoadable(contextManager, this._load());
        
    }

    private async _load() {

        // Perform and loading or setup for the component

        const myObject = new THREE.Mesh(
            new THREE.SphereGeometry(this.constructorProps.radius),
            this.material,
        );

        this.element.add(myObject);
    }

    public dispose() {

        // Clean up any resources that have been created here

        return super.dispose();
    }
}