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

<script type="text/x-template" id="telescope-type-filter-template">
    {% if valid_usersubscription|can_access_advanced_search %}
        <div class="form-group" :class="{highlighted: highlighted}">
            <v-multiselect class="multiselect--grouped" v-model="value" :options="optionGroups" track-by="id" label="label"
                           group-values="options" group-label="group" selectLabel="" deselectLabel="" selectedLabel=""
                           :multiple="true" :searchable="false" placeholder="{% trans "Select" %}">
            </v-multiselect>
            <input type="hidden" name="telescope_type" :value="getFormValue()">
        </div>
    {% else %}
        {% include "./_filter_requires_lite_or_premium_or_ultimate.html" %}
    {% endif %}
</script>

<script>
    Vue.component("telescope-type-filter", {
        template: "#telescope-type-filter-template",
        props: [
            "telescopeType"
        ],
        mixins: [
            FilterComponentMixin
        ],
        data: function () {
            return {
                value: [],
                optionGroups: [
                    {
                        group: "{{ _('Refractor')|escapejs }}",
                        options: [
                            {
                                id: "REFR ACHRO",
                                label: "{{ _('Achromatic')|escapejs }}"
                            },
                            {
                                id: "REFR SEMI-APO",
                                label: "{{ _('Semi-apochromatic')|escapejs }}"
                            },
                            {
                                id: "REFR APO",
                                label: "{{ _('Apochromatic')|escapejs }}"
                            },
                            {
                                id: "REFR NON-ACHRO GALILEAN",
                                label: "{{ _('Non-achromatic Galilean')|escapejs }}"
                            },
                            {
                                id: "REFR NON-ACHRO KEPLERIAN",
                                label: "{{ _('Non-achromatic Keplerian')|escapejs }}"
                            },
                            {
                                id: "REFR SUPERACHRO",
                                label: "{{ _('Superchromat')|escapejs }}"
                            }
                        ]
                    },
                    {
                        group: "{{ _('Reflector')|escapejs }}",
                        options: [
                            {
                                id: "REFL DALL-KIRKHAM",
                                label: "{{ _('Dall-Kirkham')|escapejs }}"
                            },
                            {
                                id: "REFL NASMYTH",
                                label: "{{ _('Nasmyth')|escapejs }}"
                            },
                            {
                                id: "REFL RITCHEY CHRETIEN",
                                label: "{{ _('Ritchey Chretien')|escapejs }}"
                            },
                            {
                                id: "REFL GREGORIAN",
                                label: "{{ _('Gregorian')|escapejs }}"
                            },
                            {
                                id: "REFL HERSCHELLIAN",
                                label: "{{ _('Herschellian')|escapejs }}"
                            },
                            {
                                id: "REFL NEWTONIAN",
                                label: "{{ _('Newtonian')|escapejs }}"
                            }
                        ]
                    },
                    {
                        group: "{{ _('Catadioptric')|escapejs }}",
                        options: [
                            {
                                id: "CATA ARGUNOV-CASSEGRAIN",
                                label: "{{ _('Argunov-Cassegrain')|escapejs }}"
                            },
                            {
                                id: "CATA KLEVTSOV-CASSEGRAIN",
                                label: "{{ _('Klevtsov-Cassegrain')|escapejs }}"
                            },
                            {
                                id: "CATA LURIE-HOUGHTON",
                                label: "{{ _('Lurie-Houghton')|escapejs }}"
                            },
                            {
                                id: "CATA MAKSUTOV",
                                label: "{{ _('Maksutov')|escapejs }}"
                            },
                            {
                                id: "CATA MAKSUTOV-CASSEGRAIN",
                                label: "{{ _('Maksutov-Cassegrain')|escapejs }}"
                            },
                            {
                                id: "CATA MOD DALL-KIRKHAM",
                                label: "{{ _('Modified Dall-Kirkham')|escapejs }}"
                            },
                            {
                                id: "CATA SCHMIDT CAMERA",
                                label: "{{ _('Schmidt camera')|escapejs }}"
                            },
                            {
                                id: "CATA SCHMIDT-CASSEGRAIN",
                                label: "{{ _('Schmidt-Cassegrain')|escapejs }}"
                            },
                            {
                                id: "CATA ACF SCHMIDT-CASSEGRAIN",
                                label: "{{ _('ACF Schmidt-Cassegrain')|escapejs }}"
                            },
                            {
                                id: "CATA ROWE-ACKERMANN SCHMIDT",
                                label: "{{ _('Rowe-Ackermann Schmidt astrograph')|escapejs }}"
                            },
                            {
                                id: "CAMERA LENS",
                                label: "{{ _('Camera lens')|escapejs }}"
                            },
                            {
                                id: "BINOCULARS",
                                label: "{{ _('Binoculars')|escapejs }}"
                            }
                        ]
                    }
                ]
            }
        },
        created: function() {
            if (this.telescopeType) {
                var types = this.telescopeType.split(',');

                for (var i = 0; i < this.optionGroups.length; i++) {
                    for (var j = 0; j < this.optionGroups[i].options.length; j++) {
                        if (types.indexOf(this.optionGroups[i].options[j].id) > -1) {
                            this.value.push(this.optionGroups[i].options[j]);
                        }
                    }
                }
            }
        },
        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;
            }
        }
    });
</script>
