import Thorium , { View , Style , Components , Controller , UserInterface , Events , Mouse , Screen , Keyboard } from "thoriumjs";
import style from '../../../styles/controls.module.css';

import {SubControls , SubControlElementInitOptions } from '../subcontrols/subcontrols'

/**
 * - Description : 
 * - Sample :
 * ```typescript
 * { class:'sample' , action:()=>{} }
 * ```
 */
export interface ContolInitOptions extends Partial<SubControls>{
    class?:string;
    action?:(e:Event)=>void;
}

class ControlButton extends Components.Button<Controller>{

    constructor(properties:ContolInitOptions){
        super({
            prop : {
                class : properties.class,
                name : 'control'
            },
            proto : {
                onMouseDown(e:Event){
                    properties.action(e);
                }
            }
        })
    }
}

export class Controls extends Components.Div<Controller>{
    constructor(controls:(ContolInitOptions|SubControls)[]|null = null){
        super({
            prop : {
                name : 'controls',
                class : `controls-container ${style.Controls}`
            },
            childrens : (controls ? Array.from(controls , (x:ContolInitOptions|SubControls,i:number) => {
                if(x instanceof SubControls)return x;
                else return new ControlButton(x);
            }) : []),
        })
    }
}