import { GUI, Controller } from 'lil-gui';
import '@eastdesire/jscolor';

export class ColorController extends Controller {

    private $input: HTMLInputElement;
    private picker: any;

    constructor(parent: GUI, object: object, property: string, alpha: boolean | 'auto' = 'auto') {
        super(parent, object, property, 'color');

        this.$input = document.createElement('input');
        this.$input.setAttribute('aria-labelledby', this.$name.id);
        this.$input.value = this.getValue();

        this.$widget.appendChild(this.$input);

        this.picker = new (window as any).jscolor(this.$input, {
            preset: 'dark',
            format: 'any',
            alphaChannel: alpha,
            borderRadius: 0,
            borderWidth: 0,
            height: 100,
            width: 150,
            sliderSize: 10,
            previewSize: 20,
            previewPadding: 3,
        });

        this.picker.onInput = () => {
            this.setValue(this.picker.toString());
        };
    }
}

export function addColorPicker(gui: GUI, object: object, property: string, alpha?: boolean | 'auto') {
    return new ColorController(gui, object, property, alpha);
}