<template>

    <div class="q-mx-md q-mb-lg">
        <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>

        <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
            <div v-if="selectedField?.app && !showSelectApp">{{ selectedField.app?.name }}</div>
            <q-space />
            <div>
                <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
                    showSelectApp = true;
                }"></q-btn>
            </div>
        </div>
    </div>

    <div v-if="!showSelectApp && selectedField.app?.name">
        <div>
            <div class="row q-mb-md">
                <!-- <div class="col"> -->
                <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
                <!-- </div> -->
                <q-space />
                <!-- <div class="col"> -->
                <div class="q-mr-md">
                    <q-input dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
                        <template v-slot:before>
                            <q-icon name="search" />
                        </template>
                    </q-input>
                </div>
            </div>
            <div class="row">
                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
                    :appId="selectedField.app?.id" not_page :filter="fieldFilter"
                    :selectedFields="selectedField.fields"></field-select>
            </div>
        </div>
    </div>
    <div style="min-width: 45vw;" v-else>
    </div>


    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
        <template v-slot:toolbar>
            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
                <template v-slot:before>
                    <q-icon name="search" />
                </template>
            </q-input>
        </template>

        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
    </show-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect, computed } from 'vue';
import ShowDialog from './ShowDialog.vue';
import FieldSelect from './FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor';
import AppSelect from './AppSelect.vue';
interface IApp {
    id: string,
    name: string
}
interface IField {
    name: string,
    code: string,
    type: string
}

interface IAppFields {
    app?: IApp,
    fields: IField[]
}

export default defineComponent({
    inheritAttrs: false,
    name: 'AppFieldSelectBox',
    components: {
        ShowDialog,
        FieldSelect,
        AppSelect,
    },
    props: {
        selectedField: {
            type: Object,
            required: true
        },
        selectType: {
            type: String,
            default: 'single'
        },

    },
    setup(props, { emit }) {
        const appDlg = ref();
        const fieldDlg = ref();
        const showSelectApp = ref(false);
        const selectedField = props.selectedField;
        console.log(props.selectedField);
        
        const store = useFlowEditorStore();

        const isSelected = computed(() => {
            return selectedField !== null && typeof selectedField === 'object' && ('app' in selectedField)
        });


        const closeAppDlg = (val: string) => {
            if (val == 'OK') {
                selectedField.app = appDlg.value.selected[0];
                selectedField.fields = [];
                showSelectApp.value = false;
            }
        };

        const closeFieldDialog = (val: string) => {
            if (val == 'OK') {
                selectedField.fields = fieldDlg.value.selected;
            }
        };
        const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
            selectedField.app = newAppinfo
        }

        const updateItems = (newFields: IField[]) => {
            selectedField.fields = newFields
        }

        watchEffect(() => {
            emit('update:modelValue', selectedField);
        });

        return {
            appDlg,
            fieldDlg,
            closeAppDlg,
            closeFieldDialog,
            showSelectApp,
            isSelected,
            updateExternalSelectAppInfo,
            filter: ref(),
            updateItems,
            fieldFilter: ref(),
        };
    }
});
</script>
