import Thorium , { Controller , Components, UserInterface } from "thoriumjs";
import style from '../../../styles/gridlist.module.css';

const {
    Div,
    Text
} = Components;

const {
    ElementUI,
    NodeUI
} = UserInterface;

export interface GridListItemOptionsInit{
    itemId?:string;
    title:string;
    description?:string;
    prop?:Thorium.ElementInterface<Controller>['prop'];
    proto?:Thorium.ElementInterface<Controller>['proto'];
    leftButton?:typeof ElementUI<Partial<Controller>>;
    rightButton?:typeof ElementUI<Partial<Controller>>;
}

export class GridListItem extends Div<Controller>{
    constructor(options:GridListItemOptionsInit){
        super({
            prop : {
                ...(options.prop ? options.prop : {}),
                name : 'item',
                ':itemid':options.itemId,
                class : `${options.prop && options.prop.class ? options.prop.class : ''}`
            },
            childrens : [
                ...(options.leftButton ? [new options.leftButton()] : []),
                new Div({
                    prop : {name : 'content'},
                    childrens : [
                        new Text({ name : 'title' , text : options.title , style : '' }),
                        ...(options.description ? [new Text({ name : 'description' , text : options.description })] : [])
                    ]
                }),
                ...(options.rightButton ? [new options.rightButton()] : []),
            ],
            proto : {
                ...(options.proto ? options.proto : {})
            }
        })
    }
}

export interface GridListOptionsInit{
    prop?:Thorium.ElementInterface<Controller>['prop'];
    items:GridListItemOptionsInit[],
    proto?:Thorium.ElementInterface<Controller>['proto'];
};

export interface GridListController extends Controller{
    getItems:()=>Record<string,Partial<Controller>>;
    getItemById:(itemId:string)=>Partial<Controller>;
    addItem:(option:GridListItemOptionsInit)=>string;
    removeItem:()=>void;
    updateItem:()=>void;
    dump:()=>void;
}

export class GridList extends Div<GridListController>{
    constructor(options:GridListOptionsInit){
        super({
            prop : {
                name : 'gridlist',
                class : `${style.GridList} context`
            },
            childrens:Array.from(options.items , (item:GridListItemOptionsInit) => {
                const itemId = crypto.randomUUID();
                return new GridListItem({...item , ...{itemId:itemId}})
            }),
            proto : {
                ...(options.proto ? options.proto : {}),
                getItems(){
                    return Object.fromEntries(new Map(Array.from(this.children , (element:Element) => {
                        return [element.getAttribute('itemid'),element];
                    })))
                },
                getItemById(itemId:string){
                    return Array.from(this.children , (element:Element) => {
                        if(element.getAttribute('itemid') == itemId)return element;
                    }).filter((x,i) => x)[0];
                },
                addItem(option:GridListItemOptionsInit){
                    const itemId = crypto.randomUUID();
                    new NodeUI([new GridListItem({...option , ...{itemId:itemId}})]).BuildIn(this).then((node) => node.Initialise());
                    return itemId;
                },
                removeItem(){

                },
                updateItem(){

                },
                dump(){
                    Array.from(this.querySelectorAll('*') , (item:Element) => {
                        return item.remove();
                    })
                }
            }
        })
    }
}