import loglevel from 'loglevel'
import { ComponentModel, structure } from './cykLang'
import { Ref, computed, ref, watch } from 'vue'
import { componentModelParameter } from './cykReact'
import { BasicType, DBColumn, ObjectData, Variables, Variable, XmlError, Data, PrimitiveData } from '@cyklang/core'
import { displayVariable } from './cykTableView'
import { AlertException } from './cykRun'
import { RowObject } from './cykTableEdit'
const logger = loglevel.getLogger('cykLabel.ts')
logger.setLevel('debug')

/**
 * 
 * @param props 
 * @returns 
 */
export function useCykLabel(props: { componentArg: ComponentModel | undefined }) {

    const isLoading = ref(false)
    const visible = componentModelParameter<boolean>(props.componentArg, "visible", true)
    const text = componentModelParameter<string>(props.componentArg, "text", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.TEXT))
    const style = componentModelParameter<string>(props.componentArg, "style", structure.scope.xlate(props.componentArg?.objectData?.tag.attributes.STYLE))

    const clickable = (props.componentArg?.objectData?.variables.getFunction('onclick') !== undefined)

    const model = computed<string>({
        get() {
            return props.componentArg?.model?.getString() || text.value
        },
        set() {
            throw 'set() unsupported'
        }
    })

    const doLoading = async () => {
        try {
            await props.componentArg?.interpolateAttributes()
        }
        catch (err) {
            logger.error(err)
        }
        finally {
            isLoading.value = false
        }
    }

    doLoading();

    return { isLoading, text, style, visible, model, clickable }
}

/**
 * 
 * @param props 
 */
export function useCykLabelCell(props: { row: RowObject | undefined, dbColumn: DBColumn | undefined }) {

    const isLoading = ref(true)
    const text: Ref<BasicType> = ref('')
    const clickable = ref(false)
    const tooltip = ref('')
    const icon = ref('')

    /**
     * 
     * @param paramName 
     * @returns 
     */
    const callFunction = async (paramName: string): Promise<Data | undefined> => {
        const functionData = props.dbColumn?.params?.getFunction(paramName)
        if (!functionData) throw 'functionData undefined'
        const callParams = new Variables()
        if (props.row) {
            const varRow = new Variable(props.row.objectData.type, props.row.objectData)
            callParams.push('row', varRow)
        }
        const result = await functionData.callFunction(callParams, structure.scope)
        return result
    }

    /**
     * 
     * @param paramName 
     * @returns 
     */
    const evalParam = async (paramName: string): Promise<string> => {
        let result = ''
        const varParam = props.dbColumn?.params?.getVariable(paramName)
        if (varParam && varParam.data && varParam.data !== null) {
            if (varParam.data.type.isPrimitive()) {
                result = varParam.getString() || ''
            }
            else if (varParam.data.type.name === 'function') {
                const dataParam = await callFunction(paramName)
                result = ''
                if (dataParam && dataParam.type.isPrimitive()) {
                    result = (dataParam as PrimitiveData).value?.toString() || ''
                }
            }
        }
        return result
    }

    /**
     * 
     */
    const doLoading = async () => {
        try {
            if (!props.dbColumn?.name.trim()) throw 'dbColumn.name undefined'
            if (props.dbColumn?.name.trim().startsWith('$')) {

            }
            else {
                const funcValue = props.dbColumn.params?.getFunction('value')
                if (funcValue) {
                    const data = await callFunction('value')
                    if (data instanceof PrimitiveData) {
                        text.value = String((data as PrimitiveData).value)
                    }
                    else {
                        logger.debug('value() returns:', data)
                        text.value = data?.toString()
                        // throw `value function does not return PrimitiveData`
                    }
                }
                else {
                    text.value = displayVariable(props.dbColumn.dataTypeName, props.dbColumn.format, props.row?.objectData.variables?.getVariable(props.dbColumn?.name.trim()))
                }
            }

            clickable.value = (props.dbColumn.params?.getFunction('onclick') !== undefined)

            tooltip.value = await evalParam('tooltip')
            icon.value = await evalParam('icon')

        }
        catch (err) {
            logger.error(err)
            AlertException(err)
        }
        finally {
            isLoading.value = false
        }
    }

    doLoading();

    watch(() => props.row, () => {
        isLoading.value = true
        doLoading()
    })


    const varModel = props.row?.objectData.variables?.getVariable(props.dbColumn?.name.trim() || '')
    if (varModel) {
        varModel.addVariableListener( async (): Promise<void> => {
            isLoading.value = true
            doLoading();
        })
    }

    return { isLoading, text, clickable, tooltip, icon }
}