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

const {
    Nav,
    Div
} = Components;

const {
    ElementUI
} = UserInterface;

interface TabOptionsInit{
    title:string;
    // content:Thorium.ElementInterface<Partial<Controller>>;
    // content:any;
    content:typeof ElementUI<Controller>;
}

class Tab extends Div<Controller>{
    constructor(options:TabOptionsInit,tabId:number){
        super({
            prop : {
                name : 'tab',
                text : options.title,
                ':selected':false,
                ':tabId' : tabId,
                style:`grid-column:${tabId + 1};`
            },
            proto : {
                onMutation(mutation){
                    const value = this.getAttribute(mutation.attributeName);
                    if(value == "true")this.parentNode._setCursorPositionByElementId(this.getAttribute('tabId'));
                },
                onMouseDown(){this.radioLike();},
                onActive(){this.setAttribute('selected',true)},
                onUnActive(){this.setAttribute('selected',false)}
            }
        })
    }
}

const NavHeadCursor = new class extends Div<Controller>{
    constructor(){
        super({
            prop : { 
                name : 'navhead-cursor',
                ':cursor-width' : '0',
                ':cursor-left' : '0'
             },
            childrens:[{type : 'cursor'}],
            proto : {
                onMutation(mutation){
                    const cursorWidth = this.getAttribute('cursor-width');
                    const cursorLeft = this.getAttribute('cursor-left');
                    this.style = `--cursor-left:${cursorLeft}px;--cursor-width:${cursorWidth}px;`;
                }
            }
        })
    }
}();

interface NavHeadController extends Controller{
    _setCursorPositionByElementId:(elementId:string)=>void;
}

class NavHead extends Nav<NavHeadController>{
    constructor(options:HeadingTabsOptionsInit['tabs'],gap?:number){
        super({
            prop : {
                name : 'navhead',
                style : `--tabs-length:${options.length + 1};${(gap ? `gap:${gap}px` : '')}`
            },
            childrens : [
                NavHeadCursor,
                ...Array.from(options , (tab,iterator) => {
                    return new Tab(tab,iterator);
                })
            ],
            proto : {
                AfterInitialise(){
                    const tabs = this.querySelectorAll('[name=tab]');
                    const isOneTabIsSelect = Array.from(tabs , (element:Element) => {
                        if(element.getAttribute('selected') == "true")return true;
                        else return false
                    }).includes(true);
                    if(!isOneTabIsSelect)tabs[0].turnActive();
                },
                _setCursorPositionByElementId(elementId:string){
                    const tabs = this.querySelectorAll('[name=tab]');
                    const element = tabs[elementId];
                    const elementDimensions = element.getBoundingClientRect();
                    // console.log(elementDimensions);
                    const Xdelta = Array.from(tabs , (tab:Element,iterator) => {
                        if(iterator < Number(elementId))return tab.getBoundingClientRect().width + (gap ? gap : 0);
                    }).filter((x,i) => x).reduce((x,y) => {
                        return x + y;
                    } , 0);
                    this.children['navhead-cursor'].setAttribute('cursor-width',elementDimensions.width);
                    this.children['navhead-cursor'].setAttribute('cursor-left',Xdelta);
                    this.context().setAttribute('view',this.querySelectorAll(`[selected=true]`)[0].innerText);
                }
            }
        })
    }
}

export interface HeadingTabsOptionsInit{
    prop? : Thorium.ElementInterface<Controller>['prop'];
    tabs:TabOptionsInit[];
    tabs_gap?:number;
}

export interface HeadingTabsControls extends Controller{

}

export class HeadingTabs extends Div<HeadingTabsControls>{
    constructor(options:HeadingTabsOptionsInit){
        super({
            prop : {
                class : `${style.HeadingTabs} context`,
                ':view' : '',
            },
            childrens : [
                new NavHead(options.tabs,(options.tabs_gap ? options.tabs_gap : null)),
                new Div({
                    prop : {
                        name : 'content',
                        ':content':'', 
                    },
                    proto : {
                        onMutation(mutation){
                            const value = this.getAttribute(mutation.attributeName);

                            const toGenerate = Array.from(options.tabs , (tabInfo) => {
                                console.log(`${tabInfo.title} / ${value}` , tabInfo.title == value)
                                if(tabInfo.title == value)return tabInfo.content;
                            }).filter((x,i) => x)[0];

                            console.warn(toGenerate);

                            if(this.children[0])this.children[0].remove();
                            if(toGenerate)new UserInterface.NodeUI([new toGenerate()])
                            .BuildIn(this)
                            .then((node) => node.Initialise());
                        }
                    }
                })
            ],
            proto : {
                onMutation(mutation){
                    const value = this.getAttribute(mutation.attributeName);

                    if(mutation.attributeName == 'view')this.children['content'].setAttribute('content',value);

                }
            }
        })
    }
}