/**
 * OptimizePress3 element type:
 * property children type
 */
;(function($, window, document) {

    "use strict";

    /**
     * CSS selector
     *
     * @type {String}
     */
    var _selector = '[data-property-type="children"]';

    /**
     * Render option widget
     *
     * @param  {Object} e
     * @param  {Object} o
     * @return {Void}
     */
    var _render = function(e, o) {
        $(o.parent).find(_selector).each(function() {
            var $list = $("<ul />")
                .attr("class", "op3-element-options-property-children-list")
                .on("click", ".op3-element-options-property-children-list-item", _clickItem)
                .on("click", ".op3-element-options-property-children-list-item-visible", _clickVisible)
                .on("click", ".op3-element-options-property-children-list-item-clone", _clickClone)
                .on("click", ".op3-element-options-property-children-list-item-remove", _clickRemove)
                .insertAfter(this);

            // make list items sortable
            new Sortable($list.get(0), {
                onUpdate: _sort,
            });

            // bind, hide and refresh
            $(this)
                .on("change", _change)
                .css("display", "none");
            _change.call(this);
        });
    }

    /**
     * Clean:
     * destroy option widget
     *
     * @param  {Object} e
     * @param  {Object} o
     * @return {Void}
     */
    var _clean = function(e, o) {
        // pass
    }

    var _getChildren = function(element) {
        return OP3.$(element)
            .children()
            .filter(function(index, child) {
                return !(false
                    || !/form|userprofile$/.test(element.type())
                    || [ "dummy", "hidden", "gdpr1", "gdpr2" ].indexOf(OP3.$(child).spec()) !== -1
                    || [ "input", "checkbox", "radiobutton", "textarea", "select", "fieldset" ].indexOf(OP3.$(child).type()) === -1
                );
            });
    }

    /**
     * Widget input change event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _change = function(e) {
        var $list = $(this).nextAll(".op3-element-options-property-children-list:first")
            .empty();
        var element = OP3.Designer.activeElement();
        if (!element)
            return;

        _getChildren(element).each(function() {
            var child = OP3.$(this);
            var $item = $("<li />")
                .attr("class", "op3-element-options-property-children-list-item")
                .attr("data-op3-element-child-uuid", child.uuid())
                .attr("data-op3-element-child-type", child.type())
                .attr("data-op3-element-child-spec", child.spec())
                .attr("data-op3-element-child-style", child.style())
                .appendTo($list);

            var visibleDisplay = child.getOption("visible", "all")
            var visibleLock = child.getOption("visibleLock", "all");

            $("<div />")
                .addClass("op3-element-options-property-children-list-item-desc")
                .html("<p>" + child.desc() + "</p>")
                .appendTo($item);
            $("<a />")
                .addClass("op3-element-options-property-children-list-item-visible")
                .addClass("op3-element-options-property-children-list-item-visible-display-" + visibleDisplay)
                .addClass("op3-element-options-property-children-list-item-visible-lock-" + visibleLock)
                .attr("href", "#")
                .html(''
                    + '<i class="op3-icon op3-icon-eye-ban-18-1"></i>'
                    + '<i class="op3-icon op3-icon-eye-17-1"></i>'
                    + '<i class="op3-icon op3-icon-lock-1"></i>'
                )
                .appendTo($item);
            $("<a />")
                .addClass("op3-element-options-property-children-list-item-clone")
                .attr("href", "#")
                .html('<i class="op3-icon op3-icon-ungroup-1"></i>')
                .appendTo($item);
            $("<a />")
                .addClass("op3-element-options-property-children-list-item-remove")
                .attr("href", "#")
                .html('<i class="op3-icon op3-icon-simple-remove-2"></i>')
                .appendTo($item);
        });

        $list.attr("data-count", length);
    }

    /**
     * Widget sortable update event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _sort = function(e) {
        var element = OP3.$(OP3.Designer.activeElement());
        var children = _getChildren(element);
        var target = children.eq(e.oldIndex);
        var index = e.newIndex;
        var method = index > e.oldIndex ? "insertAfter" : "insertBefore";

        target[method](children.eq(index));
    }

    /**
     * Widget item click event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _clickItem = function(e) {
        var element = _getClickChild(e);
        if (!element)
            return;

        element.focus();
    }

    /**
     * Widget icon visible click event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _clickVisible = function(e) {
        var element = _getClickChild(e);
        if (!element)
            return;

        element = OP3.$(element);
        var value = element.getOption("display", "all");
        var reverse = value === "none" ? OP3.Designer.getElementDefaultCssDisplay(element.type()) : "none";
        element.setOption("display", reverse, "all");

        // Refresh element fields
        OP3.transmit("elementoptionsrefreshrequest", { property: [ "children" ] });
    }

    /**
     * Widget icon clone click event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _clickClone = function(e) {
        var element = _getClickChild(e);
        if (!element)
            return;

        element.clone().insertAfter(element);
    }

    /**
     * Widget icon remove click event handler
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _clickRemove = function(e) {
        var element = _getClickChild(e);
        if (!element)
            return;

        element.detach();
    }

    /**
     * Get op3 element from click event
     *
     * @param  {Object} e
     * @return {Void}
     */
    var _getClickChild = function(e) {
        e.preventDefault();
        e.stopPropagation();

        var $item = $(e.target).closest(".op3-element-options-property-children-list-item");
        var uuid = $item.attr("data-op3-element-child-uuid");
        var element = OP3.$(OP3.Designer.activeElement()).children("#" + uuid);

        return element.length ? element : null;
    }

    // init
    OP3.bind("elementoptionsrefresh", _render);
    OP3.bind("elementoptionsclear elementoptionsformdetach", _clean);

})(jQuery, window, document);
XML-RPC server accepts POST requests only.