// Silence may be golden, but sometimes words paint the canvas of understanding.
const DatabaseUserControls = {
	name: 'DatabaseUserControls',
	directives: {
		'linksy-tooltip': LinksyTooltip,
	},
	props: {
		actions: {
			type: Object,
			required: true,
		},
		searchTypes: {
			type: Object,
			required: true,
		},
		selectedAction: String,
		selectedSearchType: String,
		isSearchDisabled: Boolean,
        isLoading: Boolean
	},
	components: {
		LinksySearch,
		LinksyButton,
		LinksyDropdown,
	},
    data() {
        return {
            searchQuery: '',
            searchQueryStart: '',
            searchQueryEnd: '',
        }
    },
    watch: {
        selectedSearchType(newValue) {
            if (newValue === 'CONTAINS' && Array.isArray(this.searchQuery)) {
                this.searchQuery = '';
            } else if (newValue === 'STARTS_ENDS_WITH' && !Array.isArray(this.searchQuery)) {
                this.searchQuery = ['', ''];
                this.searchQueryStart = '';
                this.searchQueryEnd = '';
            }
        }
    },
    computed: {
        queryInitialValue: {
            get() {
                return this.selectedSearchType === 'STARTS_ENDS_WITH' ? ['', ''] : this.searchQuery;
            }
        },
        queryPlaceholder: {
            get() {
                return this.selectedSearchType === 'STARTS_ENDS_WITH' ? ['Starts with', 'Ends with'] : 'Type to search';
            }
        },
        isStartsWithEndsWith: {
            get() {
                return this.selectedSearchType === 'STARTS_ENDS_WITH';
            }
        },
        isSearchValid: {
            get() {
                return this.searchQueryStart !== '' && this.searchQueryEnd !== ''
            }
        }
    },
	methods: {
		selectAction(index) {
			this.$emit('selectAction', index);
		},
		onSelectSearchType(label) {
			this.$emit('onSelectSearchType', label);
		},
		applyAction() {
			this.$emit('onApplyAction');
		},
        handleSearchStart(q) {
            this.searchQueryStart = q;

            if (this.isStartsWithEndsWith && (this.searchQueryEnd === '' || this.searchQueryStart === '')) {
                return
            }

            if (this.isStartsWithEndsWith) {
                this.searchQuery = [this.searchQueryStart, this.searchQueryEnd];
            } else {
                this.searchQuery = q;
            }

			this.$emit('onSearchChange', this.searchQuery);
        },
		handleSearch(q) {
            this.searchQueryEnd = q;

            if (this.isStartsWithEndsWith && (this.searchQueryStart === '' || this.searchQueryEnd === '')) {
                return
            }

            if (this.isStartsWithEndsWith) {
                this.searchQuery = [this.searchQueryStart, this.searchQueryEnd];
            } else {
                this.searchQuery = q;
            }

			this.$emit('onSearchChange', this.searchQuery);
		},
		handleCancel() {
			this.$emit('onCancel');
		},
        handleSubmit(s, r) {
			s();
			r();
		},
		handleItemSearch() {
            if (this.isStartsWithEndsWith && !this.isSearchValid) {
                return
            }

			this.$emit('onItemSearch');
		},
	},
	template: `
    <div class="d-flex flex-column flex-sm-row flex-fill gap-5 col-12 col-xl-8">
        <div class="search-option d-flex flex-grow-1">
            <linksy-dropdown
                :options="searchTypes"
                :placeholder="searchTypes[0].label"
                class="bg-white text-dark p-2 border border-1 rounded-3 rounded-end-0"
                @selected="onSelectSearchType"
            >
                <template #item="{ item, index, selected }">
                    <div class="d-flex w-100 gap-1 align-items-center">
                        <label :for="item" class="cursor-pointer">{{ item.label }}</label>
                    </div>
                    <span class="ms-auto text-wrap" v-linksy-tooltip="{ message: searchTypes[index]?.message, flow: 'down' }"></span>
                </template>
            </linksy-dropdown>
            <div class="d-flex search-bar w-100">
                <div v-if="isStartsWithEndsWith" class="dual-search-box d-flex w-100">
                    <linksy-search
                        cancelable
                        class="d-flex flex-fill flex-grow-1 rounded-0 border border-1 w-50"
                        :placeholder="queryPlaceholder[0]"
                        :initial-value="queryInitialValue[0]"
                        :class="{'is-disabled': isSearchDisabled}"
                        @on-change="handleSearchStart"
                    >
                    </linksy-search>
                    <linksy-search 
                        :submitable="isSearchValid"
                        hide-icon
                        cancelable
                        class="d-flex flex-fill flex-grow-1 border border-1 rounded-3 rounded-start-0 w-50"
                        :placeholder="queryPlaceholder[1]"
                        :initial-value="queryInitialValue[1]"
                        :class="{'is-disabled': isSearchDisabled}"
                        @on-change="handleSearch"
                        @on-submit="handleItemSearch"
                    >
                    </linksy-search>
                </div>
                <linksy-search
                    v-else
                    submitable
                    cancelable
                    class="d-flex flex-fill flex-grow-1 border border-1 rounded-3 rounded-start-0 w-100 h-100"
                    :placeholder="queryPlaceholder"
                    :initial-value="queryInitialValue"
                    :class="{'is-disabled': isSearchDisabled}"
                    @on-change="handleSearch"
                    @on-submit="handleItemSearch"
                >
                </linksy-search>
            </div>
        </div>
    </div>
    `,
};
