// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksySearchAndReplaceUserControls = {
	name: 'LinksySearchAndReplaceUserControls',
	directives: {
		'linksy-tooltip': LinksyTooltip,
	},
	props: {
		searchTypes: {
			type: Object,
			required: true,
		},
		searchInitialValue: String,
		searchPlaceholder: String,
		isSearchDisabled: Boolean,
	},
	components: {
		LinksySearch,
		LinksyButton,
		LinksyDropdown,
	},
	methods: {
		onSelectSearchType(label) {
			this.$emit('onSelectSearchType', label)
		},
		handleSearch(q) {
			this.$emit('onSearchChange', q)
		},
		handleItemSearch() {
			this.$emit('onItemSearch')
		},
	},
	template: `
        <div class="dropdown-search-container 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="search-bar d-flex w-100">
                <linksy-search 
                    submitable
                    cancelable
                    class="d-flex flex-fill flex-grow-1 border border-1 rounded-3 rounded-start-0 w-100 h-100"
                    :placeholder="searchPlaceholder"
                    :initial-value="searchInitialValue"
                    :class="{'is-disabled': isSearchDisabled}"
                    @on-change="handleSearch"
                    @on-submit="handleItemSearch"
                >
                </linksy-search>
            </div>
        </div>
    `,
}
