import { Controller } from "@hotwired/stimulus"
import * as THREE from "three"
import BIM from '../bim.js';

export default class extends Controller {
    static targets = [
        'hex',
        'color',
        'range',
        'rangeContainer',
        'size'
    ];

    /**
     * @param {Event} event 
     */
    color(event) {
        let color = event.target.value;
        this.hexTarget.querySelector('span').textContent = color;
        BIM.clipper.config.color = new THREE.Color(color);
    }

    /**
     * @param {Event} event 
     */
    size(event) {
        const value = event.target.value;
        BIM.clipper.config.size = value
        this.rangeTarget.title = value;
        this.sizeTarget.textContent = value;
    }

    deleteAll() {
        BIM.clipper.deleteAll();
        this._resetControls();
    }

    /**
     * @todo Doesn't work...
     * @param {Event} event 
     */
    toggle(event) {
        BIM.clipper.enabled = event.target.value;
    }

    _resetControls() {
        this.rangeTarget.value = 10;
        this.rangeTarget.title = 10;
        this.sizeTarget.textContent = '10';
        this.colorTarget.value = '#eaeaea';
        this.hexTarget.querySelector('span').textContent =  '#eaeaea';
    }
}