import DatGuiController from "./DatGuiController.js";
import { NativeListController } from "../../../../src/view/controller/controls/NativeListController.js";
import { HighlightDefinition } from "../../../../src/engine/graphics/ecs/highlight/HighlightDefinition.js";

class HighlightController extends DatGuiController {
    /**
     *
     * @constructor
     */
    constructor() {
        super();

        const self = this;


        /**
         *
         * @param {Highlight} model
         */
        function setModel(model) {
            self.removeAllChildren();

            self.addChild(new NativeListController({
                model: model.elements,
                elementFactory() {
                    return new HighlightDefinition();
                },
                elementViewFactory(el) {
                    const ctrl = new DatGuiController();


                    ctrl.addControl(el.color, 'r').name('Red').min(0).max(1).step(0.01);
                    ctrl.addControl(el.color, 'g').name('Green').min(0).max(1).step(0.01);
                    ctrl.addControl(el.color, 'b').name('Blue').min(0).max(1).step(0.01);
                    ctrl.addControl(el, 'opacity').name('Alpha').min(0).max(1).step(0.01);

                    return ctrl;
                }
            }));
        }

        this.model.onChanged.add(setModel);
    }
}


export default HighlightController;
