$(document).ready(function () {
    CustomSelectDependentMultiSelectInitializer.init();
});

class CustomSelectDependentMultiSelectInitializer {
    static containerSelector: string = ".custom-select-n-multi-select";

    public static init() {
        $(this.containerSelector).each((index, item) => {
            this.initElement(item);
        });
    }

    public static initElement(element: HTMLElement) {
        let parentSelect: any = $(element).find(".custom-select select.select-input")[0];
        let childContainer: any = $(element).find(".custom-multiple-select")[0];
        let childItemList: any = $(element).find("ul.child-item-list")[0];

        $(parentSelect).on("custom-select-initialized", (event, item) => {
            console.log("обработчик события в дабл-селекте");
            if (item == parentSelect) {
                CustomSelectDependentMultiSelectInitializer.setDependentSelectItems(parentSelect, childContainer, childItemList);
            }
        });

        $(parentSelect).change(function () {
            CustomSelectDependentMultiSelectInitializer.setDependentSelectItems(parentSelect, childContainer, childItemList);
        });
    }

    public static setDependentSelectItems(parent: HTMLElement, child: HTMLElement, childOriginalList: HTMLElement) {
        let parentValueContainer = $(parent).next(".styledSelect");
        let parentValue = $(parentValueContainer).attr("select-val");

        let childSourceList = $(child).find("ul.chosen-results")
        let childSelect = $(child).find("select");

        if (parentValue) {
            $(childSourceList).empty();
            $(childSelect).empty();
            $(childSelect).val('');

            let newChildList = [];

            $(childOriginalList).find(`[data-parent-value='${parentValue}']`)
                .each((i, el) => {
                    newChildList.push({
                        parentValue: $(el).attr("data-parent-value"),
                        value: $(el).attr("value"),
                        text: $(el).text()
                    });
                });

            newChildList.map((item) => {
                childSelect.append(this.getOptionFromLi(item));
                childSourceList.append(item);
            });

            $(childSelect).trigger("chosen:updated");
        }
        else {
            $(childSourceList).empty();
            $(childSelect).empty();
            $(childSelect).val('');
            $(childSelect).trigger("chosen:updated");
        }
    }

    private static getOptionFromLi(item: any) {
        return `<option data-parent-value='${item.parentValue}' value='${item.value}'>${item.text}</option>`;
    }
}