const LinksyDatabaseFilters = {
    name: "LinksyDatabaseFilters",
    directives: {
        LinksyTooltip,
        'click-outside': LinksyClickOutside,
    },
    props: {
        filter: {
            type: Object,
            required: true,
            default: {}
        },
        data: {
            type: Array,
            default: []
        },
        tables: {
            type: Array,
            default: []
        },
        isContains: Boolean
    },
    components: {
        LinksySearch,
        LinksyForm,
        LinksyButton,
        LinksyDropdown,
    },
    data() {
        return {
            searchModes: [
                { value: "contains", label: "Contains" },
                { value: "not-contains", label: "Not contains" },
            ],
            columns: [],
            moreOptions: false
        };
    },
    methods: {
        handleFilterChange(e) {
            this.$emit("onChange", { ...e });
        },
        reset() {
            const filterable = {
                column: null,
                table: null,
                search_mode: ['contains'],
                query: "",
                notQuery: "",
                ignoreImgUrls: true,
                caseSensitive: false,
                fullMatch: false,
                ignoreGuids: true
            }
            
            this.$emit("onChange", filterable);
        },
        updateColumns(value) {
            let columns = [];

            if (value) {
                this.data.forEach((table) => {
                    if (table.table_name === value) {
                        table.columns_results.forEach((column) => {
                            if (!columns.includes(column.column_name)) {
                                columns.push(column.column_name);
                            }
                        });
                    }
                });
            } else {
                this.data.forEach((table) => {
                    table.columns_results.forEach((column) => {
                        if (!columns.includes(column.column_name)) {
                            columns.push(column.column_name);
                        }
                    });
                });
            }
    
            this.columns = columns;
        }
    },

    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-column flex-lg-row flex-wrap gap-2">
                <div class="d-flex flex-nowrap gap-2">
                    <div class="linksy-filter-option-box">
                        <linksy-dropdown
                            is-resetable
                            placeholder="All tables"
                            :options="tables"
                            :initial-value="values.table"
                            @selected="(e) => {setFieldValue('table', e, true); updateColumns(e)}"
                        >
                        </linksy-dropdown>
                    </div>
                    <div class="linksy-filter-option-box">
                        <linksy-dropdown
                            is-resetable
                            placeholder="All columns"
                            :options="columns"
                            :initial-value="values.column"
                            @selected="(e) => setFieldValue('column', e, true)"
                        >
                        </linksy-dropdown>
                    </div>
                </div>

                <div class="d-flex flex-nowrap">
                    <div class="linksy-filter-option-box">
                        <linksy-dropdown
                            is-multi
                            is-resetable
                            class="filter-contain-dropdown"
                            :class="values.search_mode.length < 1 ? 'all-round' : 'rounded-end-0'"
                            :options="searchModes"
                            placeholder="Result"
                            :initial-value="values.search_mode"
                            @selected="(e) => setFieldValue('search_mode', e, true)"
                        >
                        </linksy-dropdown>
                    </div>
                    <linksy-search
                        v-if="values.search_mode.includes('contains')"
                        hide-icon
                        cancelable
                        :class="values.search_mode.includes('not-contains') ? 'rounded-0': 'rounded-3 rounded-start-0'"
                        class="search-mode-bar d-flex border border-1"
                        placeholder="Result contains..."
                        :initial-value="values.query"
                        @on-change="(e) => setFieldValue('query', e, true)"
                    >
                    </linksy-search>
                    <linksy-search
                        v-if="values.search_mode.includes('not-contains')"
                        hide-icon
                        cancelable
                        class="search-mode-bar d-flex border border-1 rounded-3 rounded-start-0"
                        placeholder="Result not contains..."
                        :initial-value="values.notQuery"
                        @on-change="(e) => setFieldValue('notQuery', e, true)"
                    >
                    </linksy-search>
                </div>
                <div v-click-outside="() => moreOptions = false" class="position-relative">
                    <linksy-button variant="white_outline" @click="() => moreOptions = !moreOptions">
                        <i class="fa fa-plus me-1"></i>
                        <span>More</span>
                    </linksy-button>
                    <div v-if="moreOptions" class="more-options-container position-absolute d-flex flex-column gap-2 bg-white p-2">
                        <div class="d-flex w-100 gap-1 align-items-center" @click="() => values.fullMatch = !values.fullMatch">
                            <div class="linksy-checkbox me-1" :class="{'checked': values.fullMatch }" />
                            <label class="cursor-pointer">Match whole word</label>
                        </div>
                        <div class="d-flex w-100 gap-1 align-items-center" @click="() => values.caseSensitive = !values.caseSensitive">
                            <div class="linksy-checkbox me-1" :class="{'checked': values.caseSensitive }" />
                            <label class="cursor-pointer">Case Sensitive</label>
                        </div>
                        <div class="d-flex w-100 gap-1 align-items-start" @click="() => values.ignoreImgUrls = !values.ignoreImgUrls">
                            <div class="linksy-checkbox me-1 mt-1" :class="{'checked': values.ignoreImgUrls }" />
                            <label class="cursor-pointer">Ignore Image URLs</label>
                        </div>
                        <div class="d-flex w-100 gap-1 align-items-start" @click="() => values.ignoreGuids = !values.ignoreGuids">
                            <div class="linksy-checkbox me-1 mt-1" :class="{'checked': values.ignoreGuids }" />
                            <label class="cursor-pointer">Ignore GUIDs</label>
                        </div>
                    </div>
                </div>
            </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>
  `,
};