// Silence may be golden, but sometimes words paint the canvas of understanding.
const LinksySearchAndReplaceFilter = {
	name: 'LinksySearchAndReplaceFilter',
	props: {
        replaceType: {
            type: String,
            default: 'link'
        },
		filterModes: {
			type: Array,
			default: []
		},
        filter: {
            type: Object,
            required: true,
            default: {},
        }
	},
	components: {
		LinksySearch,
		LinksyDropdown,
        LinksyForm,
        LinksyButton
	},
    computed: {
        isSource: {
            get() {
                return this.filter.search_mode.length >= 0;
            }
        }
    },
	methods: {
        searchPlaceholder(val){
            if (val && val === '') {
                return 'Search...';
            }
            
            return this.filterModes.find((e) => e.value === val).placeholder;
        },
        handleFilterChange(e) {
            this.$emit("onChange", { ...e });
        },
        reset() {
            let filterable = {}

            if (this.replaceType === 'title') {
                filterable = {
                    search_mode: ['title'],
                    title: "",
                    link: ""
                }
            } else {
                filterable = {
                    search_mode: ['source'],
                    source: "",
                    link: "",
                    anchor: ""
                }
            }
            
            this.$emit("onChange", filterable);
        },
        matchesAny(selected, targets) {
            return selected?.some(val => targets.includes(val));
        }
	},
	template: `
    <linksy-form
        enableReinitialize
        class="linksy-filters-box rounded-3"
        :initial-values="filter"
        :onSubmit="handleFilterChange"
        v-slot="{
            values,
            errors,
            handleChange,
            handleSubmit,
            setFieldValue,
        }"
    >
        <div class="d-flex flex-row align-items-start justify-content-between gap-4">
            <div class="d-flex flex-nowrap">
                <div class="linksy-filter-option-box">
                    <linksy-dropdown
                        is-multi
                        is-resetable
                        :options="filterModes"
                        placeholder="Filter"
                        :class="values.search_mode.length < 1 ? 'all-round' : 'rounded-end-0'"
                        class="filter-contain-dropdown bg-white rounded-1 fw-normal"
                        :initial-value="values.search_mode"
                        @selected="(e) => {
                            let updated = [...e];
                            const pairs = [
                                ['anchor', 'anchor-is'],
                                ['link', 'link-is'],
                                ['source', 'source-is']
                            ];

                            pairs.forEach(([basic, variant]) => {
                                const hasBasic = updated.includes(basic);
                                const hasVariant = updated.includes(variant);

                                if (hasBasic && hasVariant) {
                                    const lastSelected = e.lastIndexOf(basic) > e.lastIndexOf(variant) ? basic : variant;
                                    const toRemove = lastSelected === basic ? variant : basic;
                                    updated = updated.filter(val => val !== toRemove);
                                }
                            });

                            setFieldValue('search_mode', updated, true);
                        }"

                    >
                    </linksy-dropdown>
                </div>

                <linksy-search
                    v-if="values.search_mode.includes('title')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['link', 'link-is']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('title')"
                    :initial-value="values.title"
                    @on-change="(e) => setFieldValue('title', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('source-is')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor', 'anchor-is', 'link', 'link-is', 'source']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('source-is')"
                    :initial-value="values.source"
                    @on-change="(e) => setFieldValue('source', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('source')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor', 'anchor-is', 'link', 'link-is']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('source')"
                    :initial-value="values.source"
                    @on-change="(e) => setFieldValue('source', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('link-is')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor-is', 'anchor', 'link']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('link-is')"
                    :initial-value="values.link"
                    @on-change="(e) => setFieldValue('link', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('link')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor-is', 'anchor']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('link')"
                    :initial-value="values.link"
                    @on-change="(e) => setFieldValue('link', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('anchor-is')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('anchor-is')"
                    :initial-value="values.anchor"
                    @on-change="(e) => setFieldValue('anchor', e, true)"
                />

                <linksy-search
                    v-if="values.search_mode.includes('anchor')"
                    hide-icon
                    cancelable
                    :class="matchesAny(values.search_mode, ['anchor-is']) ? 'rounded-0' : 'rounded-3 rounded-start-0'"
                    class="search-mode-bar d-flex border border-1"
                    :placeholder="searchPlaceholder('anchor')"
                    :initial-value="values.anchor"
                    @on-change="(e) => setFieldValue('anchor', e, true)"
                />
                
            </div>

            <div class="linksy-filter-actions d-flex align-items-end justify-content-end gap-2 text-nowrap">
                <div class="playground-search">
                    <linksy-button
                        variant="primary_outline"
                        @click="handleSubmit"
                    >
                        <i class="fa fa-check me-2"></i>
                        <span>Apply</span>
                    </linksy-button>
                </div>
                <linksy-button variant="secondary" @click="reset">
                    <i class="fa fa-times me-2"></i>
                    <span>Reset</span>
                </linksy-button>
            </div>
        </div>
    </linksy-form>
    `
}
