(function($){
    
    if(typeof acf === 'undefined')
        return;
    
    /* 
     * Dropdown Init
     */
    var Popup = acf.models.TooltipConfirm.extend({
        
        render: function(){
            
            // set HTML
            this.html(this.get('text'));
            
            // add class
            this.$el.addClass('acf-fc-popup');
            
        }
        
    });
    
    acf.addAction('new_field/type=flexible_content', function(flexible){
        
        /* 
         * Existing Layouts
         */
        var $layouts = flexible.$layouts();
        
        if($layouts.length){
            
            $layouts.each(function(){
                
                var $layout = $(this);
                
                var $controls = $layout.find('> .acf-fc-layout-controls');
                
                // Remove potential duplicated buttons
                $controls.find('> .acfe-flexible-icon').remove();
                
                // Add Button: Copy
                $controls.prepend('<a class="acf-icon small light acf-js-tooltip acfe-flexible-icon dashicons dashicons-category" href="#" title="Copy layout" data-acfe-flexible-control-copy="' + $layout.attr('data-layout') + '"></a>');
                
                // Add Button: Clone
                $controls.prepend('<a class="acf-icon small light acf-js-tooltip acfe-flexible-icon dashicons dashicons-admin-page" href="#" title="Clone layout" data-acfe-flexible-control-clone="' + $layout.attr('data-layout') + '"></a>');
                
                
            });
            
        }
        
        /* 
         * Available Layouts
         */
        var $clones = flexible.$clones();
        
        if($clones.length){
            
            $clones.each(function(){
                
                var $layout = $(this);
                
                var $controls = $layout.find('> .acf-fc-layout-controls');
                
                // Remove potential duplicated buttons
                $controls.find('> .acfe-flexible-icon').remove();
                
                // Add Button: Copy
                $controls.prepend('<a class="acf-icon small light acf-js-tooltip acfe-flexible-icon dashicons dashicons-category" href="#" title="Copy layout" data-acfe-flexible-control-copy="' + $layout.attr('data-layout') + '"></a>');
                
                // Add Button: Clone
                $controls.prepend('<a class="acf-icon small light acf-js-tooltip acfe-flexible-icon dashicons dashicons-admin-page" href="#" title="Clone layout" data-acfe-flexible-control-clone="' + $layout.attr('data-layout') + '"></a>');
                
                
            });
            
        }
        
        /*
         * Layout: Clone
         */
        flexible.acfe_flexible_control_single_clone = function(e, $el){
            
            // Current layout
            var $layout_original = $el.closest('.layout');
            var $layout = $el.closest('.layout').clone();
            
            // Clean Layout
            acfe_flexible_control_clean_layout($layout);
            
            // Clone
            flexible.acfe_duplicate_layout({
                layout: $layout,
                before: $layout_original
            });
            
        }
        
        flexible.addEvents({'click [data-acfe-flexible-control-clone]': 'acfe_flexible_control_single_clone'});
        
        /*
         * Layout: Copy
         */
        flexible.acfe_flexible_control_single_copy = function(e, $el){
            
            // Current layout
            var $layout = $el.closest('.layout').clone();
            
            // Fix input value
            $layout.find('input').each(function(){
                
                $(this).attr('value', this.value);
                
            });
            
            // Fix teaxtarea value
            $layout.find('textarea').each(function(){
                
                $(this).html(this.value);
                
            });
            
            // Fix radio/checkbox value
            $layout.find('input:radio,input:checkbox').each(function() {
                
                if(this.checked)
                    $(this).attr('checked', 'checked');
                else
                    $(this).attr('checked', false);
                
            });
            
            // Fix Select value
            $layout.find('option').each(function(){
                
                if(this.selected)
                    $(this).attr('selected', 'selected');
                else
                    $(this).attr('selected', false);
                
            });
            
            // Clean layout
            acfe_flexible_control_clean_layout($layout);
            
            // Get layout data
            var layout_data = JSON.stringify($layout[0].outerHTML);
            
            // Append temp input
            $el.append('<input type="text" style="clip:rect(0,0,0,0);clip-path:rect(0,0,0,0);position:absolute;" value="" />').find('input').attr('value', layout_data).select();
            
            // Command: Copy
            if(document.execCommand('copy')){
                
                alert('Layout has been transferred to your clipboard');
                
            }
            
            // Command: Copy not available. Display prompt
            else{
                
                prompt('Copy the following layout data to your clipboard', layout_data);
                
            }
            
            // Remove the temp input
            $el.find('input').remove();
            
        }
        
        flexible.addEvents({'click [data-acfe-flexible-control-copy]': 'acfe_flexible_control_single_copy'});
        
        /* 
         * Dropdown: Paste
         */
        function acfe_flexible_control_button_paste(flexible){
            
            var paste = prompt('Paste layouts data in the folowing field');
            
            // No input
            if(paste == null || paste == '')
                return;
            
            try{
                
                // Paste HTML
                var $html = $(JSON.parse(paste));
                
                // Parsed layouts
                var $html_layouts = $html.closest('[data-layout]');
                
                if(!$html_layouts.length)
                    return alert('Invalid data');
                
                // init
                var validated_layouts = [];
                
                // Each first level layouts
                $html_layouts.each(function(){
                    
                    var $this = $(this);
                    
                    // Validate layout against available layouts
                    var get_clone_layout = flexible.$clone($this.attr('data-layout'));
                    
                    // Layout is invalid
                    if(!get_clone_layout.length)
                        return;
                    
                    // Add validated layout
                    validated_layouts.push($this);
                    
                });
                
                // Nothing to add
                if(!validated_layouts.length)
                    return alert('No corresponding layouts found');
                
                // Add layouts
                $.each(validated_layouts, function(){
                    
                    flexible.acfe_duplicate_layout({
                        layout: $(this),
                        before: false
                    });
                    
                });
                
            }catch(e){
                
                alert('Invalid data');
                
            }
            
        }
        
        /* 
         * Dropdown: Copy All layouts
         */
        function acfe_flexible_control_button_copy(flexible){
            
            // Get layouts
            var $layouts = flexible.$layoutsWrap().clone();
            
            // Fix attribute value different to DOM
            $layouts.find('input').each(function(){
                
                $(this).attr('value', this.value);
                
            });
            
            $layouts.find('textarea').each(function(){
                
                $(this).html(this.value);
                
            });
            
            $layouts.find('input:radio,input:checkbox').each(function() {
                
                if(this.checked)
                    $(this).attr('checked', 'checked');
                else
                    $(this).attr('checked', false);
                
            });
            
            $layouts.find('option').each(function(){
                if(this.selected)
                    $(this).attr('selected', 'selected');
                else
                    $(this).attr('selected', false);
            });
            
            // Clean layout
            acfe_flexible_control_clean_layout($layouts);
            
            // Get layouts data
            var layouts_data = JSON.stringify($layouts.html());
            
            var input = '<input type="text" style="clip:rect(0,0,0,0); clip-path:rect(0,0,0,0); position: absolute;" class="acfe_button_copy_input" value="" />';
            
            flexible.$el.append(input);
            var $copy_layout_button = flexible.$el.find('.acfe_button_copy_input');
            
            // Command: Copy select the input
            $copy_layout_button.attr('value', layouts_data).select();
            
            // Command: Copy
            if(document.execCommand('copy')){
                
                alert('Layouts have been transferred to your clipboard');
                
            }
            
            // Command: Copy not available. Display prompt
            else{
                
                prompt('Copy the following layouts data to your clipboard', layouts_data);
                
            }
            
            $copy_layout_button.remove();
            
        }
        
        /* 
         * Dropdown HTML
         */
        var dropdown_grey = 
            '<a href="#" class="button" style="padding-left:5px;padding-right:5px; margin-left:3px;" data-name="acfe-flexible-control-button">' +
            '   <span class="dashicons dashicons-arrow-down-alt2" style="vertical-align:text-top;width:auto;height:auto;font-size:13px;line-height:20px;"></span>' +
            '</a>' +
            
            '<script type="text-html" class="tmpl-acfe-flexible-control-popup">' +
            '   <ul>' +
            '       <li><a href="#" data-acfe-flexible-control-action="copy">Copy layouts</a></li>' +
            '       <li><a href="#" data-acfe-flexible-control-action="paste">Paste layouts</a></li>' +
            '   </ul>';
            '</ul>';
            
        var dropdown_blue = 
            '<a href="#" class="button button-primary" style="padding-left:5px;padding-right:5px; margin-left:3px;" data-name="acfe-flexible-control-button">' +
            '   <span class="dashicons dashicons-arrow-down-alt2" style="vertical-align:text-top;width:auto;height:auto;font-size:13px;line-height:20px;"></span>' +
            '</a>' +
            
            '<script type="text-html" class="tmpl-acfe-flexible-control-popup">' +
            '   <ul>' +
            '       <li><a href="#" data-acfe-flexible-control-action="copy">Copy layouts</a></li>' +
            '       <li><a href="#" data-acfe-flexible-control-action="paste">Paste layouts</a></li>' +
            '   </ul>';
            '</ul>';
        
        // Remove potential duplicated buttons
        flexible.$el.find('> .acf-input > .acf-flexible-content > .acfe-flexible-stylised-button > .acf-actions > [data-name="acfe-flexible-control-button"]').remove();
        flexible.$el.find('> .acf-input > .acf-flexible-content > .acf-actions > [data-name="acfe-flexible-control-button"]').remove();
        
        // Add buttons
        flexible.$el.find('> .acf-input > .acf-flexible-content > .acfe-flexible-stylised-button > .acf-actions > .acf-button').after(dropdown_grey);
        flexible.$el.find('> .acf-input > .acf-flexible-content > .acf-actions > .acf-button').after(dropdown_blue);
        
        /* 
         * Dropdown Click
         */
        flexible.acfe_flexible_control_button = function(e, $el){
            
            var $button = $el;
            var $dropdown = $button.next('.tmpl-acfe-flexible-control-popup').html();
            
            // new popup
			var popup = new Popup({
				target: $button,
				targetConfirm: false,
				text: $dropdown,
				context: this,
				confirm: function(e, $el){
                    
                    if($el.attr('data-acfe-flexible-control-action') == 'paste')
                        acfe_flexible_control_button_paste(flexible);
                    
                    else if($el.attr('data-acfe-flexible-control-action') == 'copy')
                        acfe_flexible_control_button_copy(flexible);
                    
				}
			});
			
			popup.on('click', 'a', 'onConfirm');
            
        }
        
        flexible.addEvents({'click [data-name="acfe-flexible-control-button"]': 'acfe_flexible_control_button'});
        
        /* 
         * ACFE: Flexible Duplicate Layout
         */
        flexible.acfe_duplicate_layout = function(args){
            
            // defaults
            args = acf.parseArgs(args, {
                layout: '',
                before: false
            });
            
            // validate
            if(!this.allowAdd())
                return false;
            
            // add row
            var $el = acf.duplicate({
                target: args.layout,
                append: this.proxy(function($el, $el2){
                    
                    // append before
                    if(args.before){
                        
                        // Fix clone: Use after() instead of native before()
                        args.before.after($el2);
                        
                    }
                    
                    // append end
                    else{
                        
                        this.$layoutsWrap().append($el2);
                        
                    }
                    
                    // enable 
                    acf.enable($el2, this.cid);
                    
                    // render
                    this.render();
                    
                })
            });
            
            // trigger change for validation errors
            this.$input().trigger('change');
            
            // return
            return $el;
            
        }

    });
    
    function acfe_flexible_control_clean_layout($layout){
        
        // Fix WP Editor
        $layout.find('.acf-editor-wrap').each(function(){
            
            var $input = $(this);
            
            $input.find('.wp-editor-container div').remove();
            $input.find('.wp-editor-container textarea').css('display', '');
            
        });
        
        // Fix Date
        $layout.find('.acf-date-picker').each(function(){
            
            var $input = $(this);
            
            $input.find('input.input').removeClass('hasDatepicker').removeAttr('id');
            
        });
        
        // Fix Time
        $layout.find('.acf-time-picker').each(function(){
            
            var $input = $(this);
            
            $input.find('input.input').removeClass('hasDatepicker').removeAttr('id');
            
        });
        
        // Fix DateTime
        $layout.find('.acf-date-time-picker').each(function(){
            
            var $input = $(this);
            
            $input.find('input.input').removeClass('hasDatepicker').removeAttr('id');
            
        });
        
        // Fix Color Picker
        $layout.find('.acf-color-picker').each(function(){
            
            var $input = $(this);
            
            var $color_picker = $input.find('> input');
            var $color_picker_proxy = $input.find('.wp-picker-container input.wp-color-picker').clone();
            
            $color_picker.after($color_picker_proxy);
            
            $input.find('.wp-picker-container').remove();
            
        });
        
        // Fix Post Object
        $layout.find('.acf-field-post-object').each(function(){
            
            var $input = $(this);
            
            $input.find('> .acf-input span').remove();
            
            $input.find('> .acf-input select').removeAttr('tabindex aria-hidden').removeClass();
            
        });
        
        // Fix Page Link
        $layout.find('.acf-field-page-link').each(function(){
            
            var $input = $(this);
            
            $input.find('> .acf-input span').remove();
            
            $input.find('> .acf-input select').removeAttr('tabindex aria-hidden').removeClass();
            
        });
        
        // Fix Tab
        $layout.find('.acf-tab-wrap').each(function(){
            
            var $wrap = $(this);
            
            var $content = $wrap.closest('.acf-fields');
            
            var tabs = []
            $.each($wrap.find('li a'), function(){
                
                tabs.push($(this));
                
            });
            
            $content.find('> .acf-field-tab').each(function(){
                
                $current_tab = $(this);
                
                $.each(tabs, function(){
                    
                    var $this = $(this);
                    
                    if($this.attr('data-key') != $current_tab.attr('data-key'))
                        return;
                    
                    $current_tab.find('> .acf-input').append($this);
                    
                });
                
            });
            
            $wrap.remove();
            
        });
        
    }
    
})(jQuery);