export class Popup<P>
{
    component?: Component
    payload?: P;
    config?: PopupConfig

    public static component<P>(component: Component): Popup<P>
    {
        const popup: Popup<P> = new Popup<P>();
        popup.component = component;
        return popup;
    }

    public setPayload(payload: P)
    {
        this.payload = payload;
        return this;
    }

    public setConfig(config: PopupConfig)
    {
        this.config = config;
        return this;
    }
}

export interface PopupConfig
{
    heading: string;
    size: PopupSize;
    closeOnOverlayClick?: boolean;
    callback?: (payload?: any) => void;
}

export enum PopupSize
{
    SMALL = "small", MEDIUM = "medium", LARGE = "large", FULL = "full"
}

export const usePopup = defineStore('popup', {
    state: () => ({
        popup: shallowRef<Popup<any> | undefined>(undefined)
    }),
    getters: {
        get: (state) => {
            return <P>(): Popup<P> | undefined => {
                if (state.popup)
                {
                    return state.popup as Popup<P>;
                }
                return undefined;
            }
        },
        require: (state) => {
            return <P>() => {
                if (state.popup)
                {
                    return state.popup as Popup<P>;
                }
                throw new Error('Expected to be in open popup state.');
            }
        }
    },
    actions: {
        open<P>(popup: Popup<P>) {
            this.popup = popup;
            disableScrolling();
        },
        callback(payload?: any) {
            if (this.popup?.config?.callback)
            {
                this.popup.config.callback(payload);
            }
        },
        close() {
            this.popup = undefined;
            enableScrolling();
        }
    }
})


function disableScrolling()
{
    const body = document.getElementsByTagName('body');
    for(const element of body)
    {
        element.style.overflow = "hidden";
    }
}

function enableScrolling()
{
    const body = document.getElementsByTagName('body');
    for(const element of body)
    {
        element.style.overflow = "visible";
    }
}