import type {DefineComponent} from "vue";

export const usePopup = defineStore('popup', {
    state: () => ({
        component: shallowRef<DefineComponent<any, any, any> | undefined>(undefined),
        payload: undefined as any,
        isOpen: false as boolean
    }),
    getters: {
        data(): any {
            return () => {
                return this.payload;
            }
        },
        get: (state) => {
            return () => {
                return state.component;
            }
        }
    },
    actions: {
        open(component: DefineComponent<any, any, any>, payload?: any) {
            this.component = component;
            this.payload = payload;
            this.isOpen = true
            disableScrolling();
        },
        close() {
            this.component = undefined;
            this.payload = undefined;
            this.isOpen = false;
            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";
    }
}