{% extends 'datatables/filter_blocks/base_filter_block.html' %}

{% block content %}
    <select class="filter-content" style="width:100%" multiple="multiple">
    </select>
{% endblock %}

{% block javascript %}
    <script>
        function Select2Filter(column_no, html_id, options) {

            this.storage_key = 'select2_filter'
            django_datatables.FilterBase.call(this, column_no, html_id, options)

            this.load_state = function (state_data) {
                var context = $('#' + this.html_id)
                $("select", context).val(state_data).trigger('change')
            }

            this.save_data = function (data) {
                var selected_ids = []
                var selected = $("#" + this.html_id + " select").select2('data');
                for (let i = 0; i < selected.length; i++) {
                    selected_ids.push(selected[i].id)
                }
                return selected_ids
            }

            this.buildfilter = function (refresh = false) {
                this.filter_data = [];
                var selected = $("#" + this.html_id + " select").select2('data');
                for (var i = 0; i < selected.length; i++) {
                    this.filter_data.push(selected[i].text)
                }
                if (refresh){
                    this.pTable.table.api().draw();
                }
            }

            this.filter = function (data) {
                let col_data = data[this.column_no];
                if (this.filter_data.length === 0) return true;
                if (this.filter_data.indexOf(col_data) < 0) {
                    if (col_data === "" || data[this.column_no] === null) {
                        if (this.filter_data.indexOf("null") < 0) return false
                    } else return false;
                }
                return true;
            }

            this.html = function () {
                const optionhtml = `<option value="%6">%1</option>`
                var htmldata = '';
                for (var k of this.filter_calcs.sort_keys()) {
                    htmldata += optionhtml.replace(/%1/g, k).replace(/%6/g, encodeURI(k))
                }
                var context = $('#' + this.html_id)
                $('.filter-content', context).html(htmldata);
                this.restore_state()
                $("select", context).select2({
                    templateResult: this.this_fn_parameter('format_template')
                }).change(this.this_fn('buildfilter', true))
                this.buildfilter(false)
            }

            this.clear = function () {
                var context = $('#' + this.html_id)
                $("select", context).val('').trigger('change')
            }
            this.format_template = function (state) {
                const dropdown_item = '<span>%1<span class="float-right mx-1 small badge badge-pill %3">%2</span></span>';
                if (state.loading) return;
                return $(dropdown_item.replace('%1', state.text).replace('%2', this.filter_calcs.badge_string(state.text)).replace('%3', this.filter_calcs.badge_colour(state.text)[0]));
            }
        }

        Select2Filter.prototype = Object.create(django_datatables.FilterBase.prototype);
        var options = {};
        var new_filter = new Select2Filter({{ column_no }}, '{{ html_id }}', options);
    </script>
{% endblock %}
