async function marketConfig(path) {
    const template = await loadTemplateAsync(path)
    Vue.component('market-config', {
        name: 'market-config',
        props: ['merchants', 'relays', 'config-ui'],
        template,

        data: function () {
            return {
                tab: 'merchants',
                pubkeys: new Set(),
                profiles: new Map(),
                merchantPubkey: null,
                relayUrl: null,
                configData: {
                    identifier: null,
                    name: null,
                    about: null,
                    ui: {
                        picture: null,
                        banner: null,
                        theme: null,
                        darkMode: false
                    }
                },
                themeOptions: [
                    'classic',
                    'bitcoin',
                    'flamingo',
                    'cyber',
                    'freedom',
                    'mint',
                    'autumn',
                    'monochrome',
                    'salvador'
                ]
            }
        },
        methods: {
            addMerchant: async function () {
                if (!isValidKey(this.merchantPubkey, 'npub')) {
                    this.$q.notify({
                        message: 'Invalid Public Key!',
                        type: 'warning'
                    })
                    return
                }
                const publicKey = isValidKeyHex(this.merchantPubkey) ? this.merchantPubkey : NostrTools.nip19.decode(this.merchantPubkey).data
                this.$emit('add-merchant', publicKey)
                this.merchantPubkey = null
            },
            removeMerchant: async function (publicKey) {
                this.$emit('remove-merchant', publicKey)
            },
            addRelay: async function () {
                const relayUrl = (this.relayUrl || '').trim()
                if (!relayUrl.startsWith('wss://') && !relayUrl.startsWith('ws://')) {
                    this.relayUrl = null
                    this.$q.notify({
                        timeout: 5000,
                        type: 'warning',
                        message: `Invalid relay URL.`,
                        caption: "Should start with 'wss://'' or 'ws://'"
                    })
                    return
                }
                try {
                    new URL(relayUrl);
                    this.$emit('add-relay', relayUrl)
                } catch (error) {
                    this.$q.notify({
                        timeout: 5000,
                        type: 'warning',
                        message: `Invalid relay URL.`,
                        caption: `Error: ${error}`
                    })
                }


                this.relayUrl = null
            },
            removeRelay: async function (relay) {
                this.$emit('remove-relay', relay)
            },
            updateUiConfig: function () {
                const { name, about, ui } = this.configData
                console.log('### this.info', { name, about, ui })
                this.$emit('ui-config-update', { name, about, ui })
            }
        },
        created: async function () {
            console.log('### this.configData', this.configData)
            console.log('### this.configUi', this.configUi)
            if (this.configUi) {
                this.configData = { ...this.configData, ...this.configUi, ui: { ...this.configData.ui, ...(this.configUi.ui || {}) } }
            }
            console.log('### this.configData', this.configData)

        }
    })
}
