{% load wagtailadmin_tags %}
<style>

    #dialog-icon .w-dialog__content {
        padding: 48px 40px;
    }


    .icon-selector-container {
        margin-bottom: 30px;
    }

    .icon-selector {
    }

    #icon-button {
        height: 50px;
        padding: 10px;
        display: flex;
        justify-content: start;
        align-items: center;
        border-radius: 3px;
    }

    #icon-container {
        display: flex;
    }

    #icon-options {
        margin: 20px 0;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        overflow: scroll;
        justify-content: center;
    }

    .svg-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 50px;
        overflow: hidden;
        width: 100px;
        margin: 20px 10px;
        cursor: pointer;
        white-space: nowrap;
    }

    .icon-label {
        font-size: 12px;
        width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .icon-option {
        height: 40px;
        width: 40px;
    }

    .selected-icon {
        height: 24px;
        width: 24px;
        margin-right: 10px;
    }

</style>

<script>
    // field name
    const fieldName = "{{ widget.name }}"

    $(document).ready(function () {

        const $iconContainer = $("#icon-container")
        const $iconOptions = $("#icon-options")
        const $iconClear = $("#icon-choice-clear")

        // form field Data
        const $iconEl = $(`input[name=${fieldName}]`)

        const iconDialog = document.getElementById("dialog-icon")

        const createIconOptions = (onSelect) => {
            const $svgDefs = $('div[data-sprite] svg defs symbol')
            $svgDefs.each(function () {
                let iconId = $(this).attr("id")
                const parts = iconId.split("-")
                if (parts[0] === "icon") {
                    iconId = parts.slice(1).join("-")
                }
                createIconOption(iconId, onSelect).appendTo($iconOptions)
            })
        }

        const createIconOption = (iconId, onSelect) => {
            const $container = $("<div class='svg-container'>")
            $container.on("click", () => onSelect(iconId))
            $(`<svg class="icon icon-option" aria-hidden="true"><use href="#icon-${iconId}"></use></svg>`).appendTo($container)
            $(`<div class="icon-label">${iconId}</div>`).appendTo($container)
            return $container
        }

        const handleOnSelectColor = (iconId) => {
            const svg = $(`<svg class="icon selected-icon" aria-hidden="true"><use href="#icon-${iconId}"></use></svg>`)

            $iconContainer.html(svg)
            $iconEl.val(iconId)

            // hide color dialog
            iconDialog.dispatchEvent(new CustomEvent("wagtail:hide"))

            $iconClear.show()
        }

        createIconOptions(handleOnSelectColor)


        $("#id_icon_filter").on("keyup", function () {
            const value = $(this).val().toLowerCase();
            $("#icon-options div").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });


        $iconClear.on("click", function () {
            // clear form input
            $iconEl.val("")

            // clear svg preview
            $iconContainer.html("")

            $(this).hide()
        })


    });


</script>

<div class="icon-selector-container">
    <div class="icon-selector">
        <input type="{{ widget.type }}" name="{{ widget.name }}"{% if widget.value != None %}
               value="{{ widget.value|stringformat:'s' }}"{% endif %}{% include "django/forms/widgets/attrs.html" %}>
        <div style="display: flex;align-items: center">
            <button id="icon-button" type="button" class="button button-secondary"
                    data-a11y-dialog-show="dialog-icon">
                <span id="icon-container">
                    {% if widget.value %}
                        <svg class="icon selected-icon" id="selected-icon" aria-hidden="true">
                            <use href="#icon-{{ widget.value }}"></use>
                        </svg>
                    {% endif %}
                </span>
                <span class="icon-select-message">
                    Click to choose icon
                </span>
            </button>
            <button class="button button-small no" id="icon-choice-clear" type="button"
                    style="{% if not widget.value %}display:none;{% endif %} ">
                <span>Clear choice</span>
            </button>
        </div>
        {% dialog id="dialog-icon" title="Select Icon" %}
            <div class="w-field__wrapper w-mb-0" data-field-wrapper="" style="margin-top: 20px">
                <label class="w-field__label w-sr-only" for="id_icon_filter" id="id__icon_filter-label">
                    Search icon
                </label>
                <div class="w-field w-field--char_field w-field--text_input" data-field="" data-contentpath="q">
                    <div class="w-field__input" data-field-input="">
                        <svg class="icon icon-search w-field__icon" aria-hidden="true">
                            <use href="#icon-search"></use>
                        </svg>
                        <input type="text" name="search_icon" placeholder="Search icon" id="id_icon_filter">
                    </div>
                </div>
            </div>
            <div id="icon-options">
            </div>
        {% enddialog %}
    </div>
</div>