/* ========================================================================
 * octobercms: front-end javascript extras
 * http://octobercms.com
 * ========================================================================
 * copyright 2016 alexey bobkov, samuel georges
 * ======================================================================== */

+function ($) { "use strict";
    if ($.oc === undefined)
        $.oc = {}

    // @todo provide an interface for configuration
    // - custom loader css class
    // - custom stripe loader color
    // - flash message interval

    var loader_class = 'oc-loading';

    // flash handling
    // ============================

    $(document).on('ajaxsetup', '[data-request][data-request-flash]', function(event, context) {
        context.options.handleerrormessage = function(message) {
            $.oc.flashmsg({ text: message, class: 'error' })
        }

        context.options.handleflashmessage = function(message, type) {
            $.oc.flashmsg({ text: message, class: type })
        }
    })

    // form validation
    // ============================

    $(document).on('ajaxvalidation', '[data-request][data-request-validate]', function(event, context, errormsg, fields) {
        var $this = $(this).closest('form'),
            $container = $('[data-validate-error]', $this),
            messages = [],
            $field

        $.each(fields, function(fieldname, fieldmessages) {
            $field = $('[data-validate-for="'+fieldname+'"]', $this)
            messages = $.merge(messages, fieldmessages)
            if (!!$field.length) {
                if (!$field.text().length || $field.data('emptymode') == true) {
                    $field
                        .data('emptymode', true)
                        .text(fieldmessages.join(', '))
                }
                $field.addclass('visible')
            }
        })

        if (!!$container.length) {
            $container = $('[data-validate-error]')
        }

        if (!!$container.length) {
            var $oldmessages = $('[data-message]', $container)
            $container.addclass('visible')

            if (!!$oldmessages.length) {
                var $clone = $oldmessages.first()

                $.each(messages, function(key, message) {
                    $clone.clone().text(message).insertafter($clone)
                })

                $oldmessages.remove()
            }
            else {
                $container.text(errormsg)
            }
        }

        $this.one('ajaxerror', function(event){
            event.preventdefault()
        })
    })

    $(document).on('ajaxpromise', '[data-request][data-request-validate]', function() {
        var $this = $(this).closest('form')
        $('[data-validate-for]', $this).removeclass('visible')
        $('[data-validate-error]', $this).removeclass('visible')
    })

    // loading buttons
    // ============================

    $(document)
        .on('ajaxpromise', '[data-request]', function() {
            var $target = $(this)

            if ($target.data('attach-loading') !== undefined) {
                $target
                    .addclass(loader_class)
                    .prop('disabled', true)
            }

            if ($target.is('form')) {
                $('[data-attach-loading]', $target)
                    .addclass(loader_class)
                    .prop('disabled', true)
            }
        })
        .on('ajaxfail ajaxdone', '[data-request]', function() {
            var $target = $(this)

            if ($target.data('attach-loading') !== undefined) {
                $target
                    .removeclass(loader_class)
                    .prop('disabled', false)
            }

            if ($target.is('form')) {
                $('[data-attach-loading]', $target)
                    .removeclass(loader_class)
                    .prop('disabled', false)
            }
        })

    // stripe load indicator
    // ============================

    var stripeloadindicator = function() {
        var self = this
        this.counter = 0
        this.indicator = $('<div/>').addclass('stripe-loading-indicator loaded')
                            .append($('<div />').addclass('stripe'))
                            .append($('<div />').addclass('stripe-loaded'))
        this.stripe = this.indicator.find('.stripe')

        $(document).ready(function() {
            $(document.body).append(self.indicator)
        })
    }

    stripeloadindicator.prototype.show = function() {
        this.counter++

        // restart the animation
        this.stripe.after(this.stripe = this.stripe.clone()).remove()

        if (this.counter > 1) {
            return
        }

        this.indicator.removeclass('loaded')
        $(document.body).addclass('oc-loading')
    }

    stripeloadindicator.prototype.hide = function(force) {
        this.counter--

        if (force !== undefined && force) {
            this.counter = 0
        }

        if (this.counter <= 0) {
            this.indicator.addclass('loaded')
            $(document.body).removeclass('oc-loading')
        }
    }

    $.oc.stripeloadindicator = new stripeloadindicator()

    // stripe load indicator data-api
    // ============================

    $(document)
        .on('ajaxpromise', '[data-request]', function(event) {
            // prevent this event from bubbling up to a non-related data-request
            // element, for example a <form> tag wrapping a <button> tag
            event.stoppropagation()

            $.oc.stripeloadindicator.show()

            // this code will cover instances where the element has been removed
            // from the dom, making the resolution event below an orphan.
            var $el = $(this)
            $(window).one('ajaxupdatecomplete', function() {
                if ($el.closest('html').length === 0)
                    $.oc.stripeloadindicator.hide()
             })
        })
        .on('ajaxfail ajaxdone', '[data-request]', function(event) {
            event.stoppropagation()
            $.oc.stripeloadindicator.hide()
        })

    // flash message
    // ============================

    var flashmessage = function (options, el) {
        var
            options = $.extend({}, flashmessage.defaults, options),
            $element = $(el)

        $('body > p.flash-message').remove()

        if ($element.length == 0) {
            $element = $('<p />').addclass(options.class).html(options.text)
        }

        $element
            .addclass('flash-message fade')
            .attr('data-control', null)
            .on('click', 'button', remove)
            .on('click', remove)
            .append('<button type="button" class="close" aria-hidden="true">&times;</button>')

        $(document.body).append($element)

        settimeout(function() {
            $element.addclass('in')
        }, 100)

        var timer = window.settimeout(remove, options.interval * 1000)

        function removeelement() {
            $element.remove()
        }

        function remove() {
            window.clearinterval(timer)

            $element.removeclass('in')
            $.support.transition && $element.hasclass('fade')
                ? $element
                    .one($.support.transition.end, removeelement)
                    .emulatetransitionend(500)
                : removeelement()
        }
    }

    flashmessage.defaults = {
        class: 'success',
        text: 'default text',
        interval: 5
    }

    if ($.oc === undefined)
        $.oc = {}

    $.oc.flashmsg = flashmessage

    // flash message data-api
    // ===============

    $(document).render(function(){
        $('[data-control=flash-message]').each(function(){
            $.oc.flashmsg($(this).data(), this)
        })
    })

}(window.jquery);