export class Popup
{
    constructor (
        public component: Component,
        public config: PopupConfig,
        public payload?: any
    ) {}
}

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

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

export const usePopup = defineStore('popup', {
    state: () => ({
        popup: shallowRef<Popup | undefined>(undefined)
    }),
    getters: {
        get: (state) => {
            return () => {
                return state.popup;
            }
        },
        require: (state) => {
            return () => {
                if (state.popup)
                {
                    return state.popup;
                }
                throw new Error('Expected to be in open popup state.');
            }
        }
    },
    actions: {
        open(popup: Popup) {
            this.popup = popup;
            disableScrolling();
        },
        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";
    }
}