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

export interface SubControlElementInitOptions{
    title:string;
    class:string;
    action:(e:Event)=>void;
}

type SubControlsInitOptions = Thorium.ElementInterface<Controller>["prop"];

class SubControlElement extends Components.Div<Controller>{
    constructor(option:SubControlElementInitOptions){
        super({
            prop : {
                name : 'subcontrol'
            },
            childrens : [
                new Components.Button<Controller>({
                    prop : {
                        class : option.class
                    }
                }),
                new Components.Text<Controller>({ text : option.title , style:null , name : 'title'})
            ],
            proto : {
                onMouseDown(e:Event){
                    option.action(e);
                }
            }
        })
    }
}

class SubControlContainer extends Components.Div<Controller>{

    constructor(childrens:SubControlElementInitOptions[]){
        super({
            prop : {
                name : 'container',
                class : style.SubControlContainer
            },
            childrens : Array.from(childrens , (x:SubControlElementInitOptions,i) => {
                return new SubControlElement(x);
            })
        })
    }

}

export class SubControls extends Components.Div<Controller>{
    constructor(options:SubControlsInitOptions,childrens:SubControlElementInitOptions[]){
        super({
            prop : {
                ...options,
                name : 'subcontrols',
                class : `${style.SubControls} ${(options.class ? options.class : '')} context`,
                ':show':false
            },
            childrens : [
                new Components.Button<Controller>({
                    prop : {
                        name : 'expend'
                    },
                    proto : {
                        onMouseDown(){
                            const context = this.context();
                            const show = context.getAttribute('show');
                            if(show == 'true')context.setAttribute('show',false);
                            else context.setAttribute('show',true);
                        }
                    }
                }),
                new SubControlContainer(childrens)
            ]
        })
    }
}