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

class loading extends Components.Div<any>{
    constructor(options){
        super({
            prop : { 
                class : `loading ${style.Loading} ${(options.class ? options.class : '')}` , 
                ...(options.style ? {style : options.style} : {}),
                text : `
                <svg class="loading-bag" height="100" width="100">
                    <circle  cx="50" cy="50" r="40" stroke="#F8BBD0" stroke-width="3" fill="none">
                    </circle>
                </svg>
                <svg class="loading-over" height="100" width="100">
                    <circle  cx="50" cy="50" r="40" stroke="#E91E63" stroke-width="3" fill="none" >
                    <animate attributeType="CSS" attributeName="stroke-dasharray" from="1,254" to="247,56" dur="5s" repeatCount="indefinite" />
                    </circle>
                </svg>`
            }
        })
    }
}

interface OverlayController extends Controller{
    Close:()=>void;
}

class Content extends Components.Div<OverlayController>{
    constructor(options:OverlayOptions){
        super({
            prop : {
                name : 'overlay',
                class : `${style.Overlay} ${(options.class ? options.class : '')}`,
                ...(options.HTML && (!options.Thorium && !options.DOM) ? {text : options.HTML} : {}),
                style : `background:${options.background};${(options.style ? options.style : '')}`,
            },
            childrens : [
                (() => {
                    if(options.loading)return new loading(options);
                    else if(options.Thorium)return options.Thorium;
                })()
            ],
            proto : {
                AfterInitialise(){
                    if(options.DOM && !options.Thorium)options.DOM(this);
                },
                Close(){
                    if(options.onclose)options.onclose();
                    this.setAttribute('onclose',true);
                    setTimeout( () => {
                        this.remove();
                    }, options.oncloseDelay)
                }
            }
        })
    }
}

export class overlay{

    #_overlay:Partial<OverlayController>;
    get overlay(){return this.#_overlay}

    constructor(target:Element , options:OverlayOptions){

        if(options.onload)options.onload();

        new UserInterface.NodeUI([new Content(options)])
        .BuildIn(target)
        .then((node) => {
            node.Initialise();
            this.#_overlay = node.elements[0];
        });

    }

    remove(){this.#_overlay.Close()}

}

export interface OverlayOptions{
    style?:string;
    class?:string;
    background?:string;
    /** if true, spiner loading will be use in the overlay, if TRUE, content will not be loaded */
    loading?:boolean;
    /** component thorium to load in the overlay, only when `{loading:false}` */
    Thorium?:UserInterface.TemplateInterface<any>;
    /** DOM stcript to load in the overlay, only when `{loading:false,thorium:null}` */
    DOM?:(element:Partial<Controller>)=>void;
    /** HTML to load in the overlay, only when `{loading:false,thorium:null,dom:null}` */
    HTML?:string;
    onload:()=>void;
    oncloseDelay:number;
    onclose:()=>void;
}

export function Overlay(target:Element , options?:OverlayOptions){
    return new overlay(target,{
        loading:false,
        background:"#f5f5f5",
        Thorium:null,
        DOM:null,
        HTML:null,
        onload:null,
        oncloseDelay:0,
        onclose:null,
        ...options
    })
}