<script setup lang="ts">
import { onMounted } from 'vue'
import { UIAudio, UIButton, UIIcon, UIInput } from '@kankan/components'
import type { VNode } from 'vue'
// import { buildProps } from '@kankan/utils';
// import { h } from 'vue';
// import * as KanKanSDK from '@kankan/sdk';
// console.log('UI', UIAudio, UIIcon)

onMounted(async () => {
    const KanKan = (window as any).KanKan
    const app = new KanKan({
        // dom: '#scene',
        num: 'KJ-JYo2ZZyKKJ',
    })
    app.mount('#scene').render()

    // console.log('TagView', await TagView);
    // const el = h(KKAudio, {
    //   src: 'http://samplelib.com/lib/preview/mp3/sample-3s.mp3',
    // });
    // app.use(KKAudio);

    // console.log('kankan', KKAudio);
    // const res = await kankan.use(KKAudio.render());
    // console.log('11', res);
    app.use('TagEditor')

    const TagView = await app.use('TagView', {
        render: (data: VNode) => {
            console.log('data', data.type)
        },
    })

    TagView.on('click', (event: Event) => {
        console.log('event', event)
        // debugger;
    })
    console.log('1app', app)

    const TagEditor = await app.TagManager.editor.promise()
    console.log('TagEditor', TagEditor)
    // TagEditor.enter();

    console.log('TagView', TagView)
    // .then(function () {
    //   console.log(arguments);
    // });
})
</script>

<template>
    <div id="scene">
        <UIAudio src="http://samplelib.com/lib/preview/mp3/sample-3s.mp3" />
        <UIButton>djdjddd</UIButton>
        <UIIcon type="checkbox" :size="129" />
        <UIInput type="radio" />
    </div>
</template>

<style scoped>
#scene {
    width: 100vw;
    height: 100vh;
}
</style>
