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

import  {Icon , IconInitOptions} from '../icon/icon';
import  {Controls , ContolInitOptions } from '../controls/controls';


export interface LineControlInitOptions{
    /** line control icon */
    icon?:IconInitOptions;
    /** line text */
    text:string;
    /** line properties */
    prop?:Thorium.ElementInterface<Controller>['prop'];
    proto?:Thorium.ElementInterface<Controller>['proto'];
    /** line controls */
    controls?:ContolInitOptions[];
    /** on line mousedown callback */
    onLineMouseDown?:(event:Event)=>void;
}

export class LineControl extends Components.Div<Controller>{
    constructor(options:LineControlInitOptions){
        super({
            prop : {
                ...(options.prop ? options.prop : {}),
                name : 'line',
                class : `${style.LineControl} ${(options.prop && options.prop.class ? options.prop.class : '')}`
            },
            childrens : [
                ...(options.icon ? [new Icon(options.icon)] : []),
                new Components.Link<Controller>({
                    prop : { name : 'text' , text : options.text }
                }),
                ...(options.controls && options.controls.length > 0 ? [new Controls(options.controls)] : []),
            ],
            proto : {
                ...(options.proto ? options.proto : {}),
                onMouseDown(event){
                    if(options.onLineMouseDown)options.onLineMouseDown(event);
                }
            }
        })
    }
}