{% load i18n %}
{% load astrobin_apps_premium_tags %}

<script type="text/x-template" id="filter-types-filter-template">
    {% if valid_usersubscription|can_access_full_search %}
        <div class="form-group" :class="{highlighted: highlighted}">
            <v-multiselect v-model="value" :options="options" track-by="id" label="label" selectLabel=""
                           deselectLabel="" selectedLabel="" :searchable="true" :multiple="true"
                           placeholder="{% trans "Select" %}"></v-multiselect>
            <input type="hidden" name="filter_types" :value="getFormValue()">
            <span class="help-block">
                <p>
                    {% blocktrans trimmed %}
                        Results will include images that feature all selected filter types.
                    {% endblocktrans %}
                </p>
            </span>

            <div v-if="showMatchTypeSelect">
                <label for="filter_types_op">
                    {{ _('Match choices')|escapejs }}
                </label>
                <select id="filter_types_op" class="form-control" data-minimum-results-for-search="Infinity">
                    <option value="ANY">{{ _('Any')|escapejs }}</option>
                    <option value="ALL">{{ _('All')|escapejs }}</option>
                </select>
                <input type="hidden" name="filter_types_op" :value="selectedFilterTypesOp">
            </div>
        </div>
    {% else %}
        {% include "./_filter_requires_ultimate.html" %}
    {% endif %}
</script>

<script>
    Vue.component("filter-types-filter", {
        template: "#filter-types-filter-template",
        props: {
            filterTypes: String,
            filterTypesOp: {
                type: String,
                default: 'ANY'
            }
        },
        mixins: [
            FilterComponentMixin
        ],
        data: function () {
            return {
                value: [],
                selectedFilterTypesOp: this.filterTypesOp, 
                options: [
                    {id: "H_ALPHA", label: "{{ _('Hydrogen-alpha (Hα)')|escapejs }}"},
                    {id: "H_BETA", label: "{{ _('Hydrogen-beta (Hβ)')|escapejs }}"},
                    {id: "SII", label: "{{ _('Sulfur-II (SII)')|escapejs }}"},
                    {id: "OIII", label: "{{ _('Oxygen-III (OIII)')|escapejs }}"},
                    {id: "NII", label: "{{ _('Nitrogen-II (NII)')|escapejs }}"},
                    {id: "UV", label: "{{ _('Ultraviolet (UV)')|escapejs }}"},
                    {id: "IR", label: "{{ _('Infrared (IR)')|escapejs }}"},
                    {id: "UV_IR_CUT", label: "UV/IR Cut"},
                    {id: "MULTIBAND", label: "{{ _('Multiband')|escapejs }}"},
                    {id: "LP", label: "{{ _('Light pollution suppression')|escapejs }}"},
                    {id: "L", label: "{{ _('Luminance/clear (L)')|escapejs }}"},
                    {id: "R", label: "{{ _('Red channel (R)')|escapejs }}"},
                    {id: "G", label: "{{ _('Green channel (G)')|escapejs }}"},
                    {id: "B", label: "{{ _('Blue channel (B)')|escapejs }}"},
                    {id: "ND", label: "{{ _('Neutral density (ND)')|escapejs }}"},
                    {id: "UHC", label: "{{ _('Ultra High Contrast (UHC)')|escapejs }}"},
                    {id: "SKY_GLOW", label: "{{ _('Sky glow')|escapejs }}"},
                    {id: "SOLAR", label: "{{ _('Solar')|escapejs }}"},
                    {id: "LUNAR", label: "{{ _('Lunar')|escapejs }}"},
                    {id: "PLANETARY", label: "{{ _('Planetary')|escapejs }}"},
                    {id: "COMETARY", label: "{{ _('Cometary')|escapejs }}"},
                    {id: "PHOTOMETRIC_U", label: "{{ _('Photometric Ultraviolet')|escapejs }}"},
                    {id: "PHOTOMETRIC_B", label: "{{ _('Photometric Blue')|escapejs }}"},
                    {id: "PHOTOMETRIC_V", label: "{{ _('Photometric Visual')|escapejs }}"},
                    {id: "PHOTOMETRIC_R", label: "{{ _('Photometric Red')|escapejs }}"},
                    {id: "PHOTOMETRIC_I", label: "{{ _('Photometric Infrared')|escapejs }}"},
                    {id: "OTHER", label: "{{ _('Other')|escapejs }}"},
                ]
            }
        },
        created: function () {
            if (this.filterTypes) {
                const types = this.filterTypes.split(',');

                for (let i = 0; i < this.options.length; i++) {
                    if (types.indexOf(this.options[i].id) > -1) {
                        this.value.push(this.options[i]);
                    }
                }
            }
        },
        methods: {
            getFormValue: function () {
                if (Array.isArray(this.value)) {
                    return this.value.map(function (v) {
                        return v.id;
                    }).join(',');
                }

                if (this.value) {
                    return this.value.id;
                }

                return null;
            }
        },
        mounted: function() {
            this.initMatchTypeSelect("#filter_types_op", "filterTypesOp", "selectedFilterTypesOp");
        },
        watch: {
            selectedFilterTypesOp: function (newVal) {
                this.updateHiddenInput('filter_types_op', newVal);
            },
            showMatchTypeSelect: function (newVal) {
                if (newVal) {
                    this.$nextTick(() => {
                        this.initMatchTypeSelect("#filter_types_op", "filterTypesOp", "selectedFilterTypesOp");
                    });
                }
            }
        },
    });
</script>
