import { SetupContext, ref } from "vue";
import { ComponentModel, structure } from "./cykLang";
import { componentModelParameter } from "./cykReact";
import { Expression, Variables } from "@cyklang/core";
import { Router } from "vue-router";

export function useCykMenuItem(props: { componentArg: ComponentModel | undefined }, context: SetupContext<'hideleftdrawer'[]>, router: Router) {

    if (!props.componentArg) throw 'useCykMenuItem(): componentArg undefined'

    const isLoading = ref(false)

    const visible = componentModelParameter<boolean>(props.componentArg, "visible", true)
    const disable = componentModelParameter<boolean>(props.componentArg, "disable", false)
    const icon = componentModelParameter<string>(props.componentArg, "icon", props.componentArg?.objectData?.tag.attributes.ICON)
    const label = componentModelParameter<string>(props.componentArg, "label", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.LABEL))
    const description = componentModelParameter<string>(props.componentArg, "description", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.DESCRIPTION))
    const pathname = componentModelParameter<string>(props.componentArg, "pathname", props.componentArg?.objectData?.tag.attributes.PATHNAME)
    
    const onclickData = props.componentArg.objectData?.variables.getFunction('onclick')

    const onclick = () => {

        if (onclickData) {
            (async () => {
                if (props.componentArg?.objectData)
                    await onclickData.callFunction(new Variables(), props.componentArg?.objectData.scope)
            })()
        }
        else if (pathname.value) {
            if (pathname.value.startsWith('/')) {
                router.push(pathname.value)
            }
            else {
                (async () => {
                    context.emit('hideleftdrawer')
                    if (props.componentArg?.objectData) {
                        const express = new Expression(props.componentArg?.objectData.scope)
                        await express.evaluate(pathname.value)
                    }
                    
                })()
            }
        }
    }

    return { isLoading, visible, disable, icon, label, description, onclick }
}