<template>
    <div class="q-mx-md" style="max-width: 600px;">
        <!-- <q-card> -->
        <div class="q-mb-md">
            <q-input ref="inputRef" outlined dense debounce="200" @update:model-value="updateSharedText"
                v-model="sharedText" :readonly="!canInput">
                <template v-slot:append>
                    <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
                </template>
            </q-input>

        </div>

        <div class="row q-gutter-sm">
            <q-btn v-for="button in buttonsConfig" :key="button.type" :color="button.color" @mousedown.prevent
                @click="openDialog(button)" size="sm">
                {{ button.label }}
            </q-btn>
        </div>

        <show-dialog v-model:visible="dialogVisible" :name="currentDialogName" @close="closeDialog" min-width="400px">
            <template v-slot:toolbar>
                <q-input dense debounce="200" v-model="filter" clearable>
                    <template v-slot:before>
                        <q-icon name="search" />
                    </template>
                </q-input>
            </template>
            <!-- asdf -->
            <component :is="currentComponent" @select="handleSelect" :filter="filter" :appId="appId" />
        </show-dialog>
        <!-- </q-card> -->
    </div>
</template>

<script lang="ts">
import { ref, inject, watchEffect, defineComponent } from 'vue';
import FieldAdd from './FieldAdd.vue';
import VariableAdd from './VariableAdd.vue';
// import FunctionAdd from './FunctionAdd.vue';
import ShowDialog from '../ShowDialog.vue';

type ButtonConfig = {
    label: string;
    color: string;
    type: string;
};

export default defineComponent({
    name: 'DynamicItemInput',
    components: {
        FieldAdd,
        VariableAdd,
        // FunctionAdd,
        ShowDialog
    },
    props: {
        canInput: {
            type: Boolean,
            default: false
        },
        appId: {
            type: String,
        },
        selectedObject: {
            default: {}
        },
        buttonsConfig: {
            type: Array as () => ButtonConfig[],
            default: () => [
                { label: 'フィールド', color: 'primary', type: 'FieldAdd' }
            ]
        }
    },
    setup(props, { emit }) {
        const filter = ref('');
        const dialogVisible = ref(false);
        const currentDialogName = ref('');
        const currentComponent = ref('FieldAdd');
        const sharedText = ref(props.selectedObject?.sharedText ?? '');
        const inputRef = ref();

        const openDialog = (button: ButtonConfig) => {
            currentDialogName.value = button.label;
            currentComponent.value = button.type;
            dialogVisible.value = true;
        };

        const closeDialog = () => {
            dialogVisible.value = false;
        };

        const handleSelect = (value) => {
            // 获取当前光标位置
            // const cursorPosition = inputRef.value.getNativeElement().selectionStart;
            // if (cursorPosition === undefined || cursorPosition === 0) {
            sharedText.value = `${value._t}`;
            // } else {
            //     const textBefore = sharedText.value.substring(0, cursorPosition);
            //     const textAfter = sharedText.value.substring(cursorPosition);
            //     sharedText.value = `${textBefore}${value._t}${textAfter}`;
            // }

            emit('update:selectedObject', { sharedText: sharedText.value, ...value });
            dialogVisible.value = false;
        };

        const clearSharedText = () => {
            sharedText.value = '';
            emit('update:selectedObject', {});
        }
        const updateSharedText = (value) => {
            sharedText.value = value;

            emit('update:selectedObject', { ...props.selectedObject, sharedText: value });
            console.log(props.selectedObject);
        }

        return {
            filter,
            dialogVisible,
            currentDialogName,
            currentComponent,
            openDialog,
            closeDialog,
            handleSelect,
            clearSharedText,
            updateSharedText,
            sharedText,
            inputRef
        };
    }
});
</script>