$(function () {

    'use strict';

    gsap.registerPlugin(Flip);

    // DOM ready, take it away
    var droppables = $(".icon");
    var dropZones = $(".drop-zone, .placeholder");
    var overlapThreshold = "60%";

    var handler={icons: {}, onChange:undefined};
    window.iconpicklisthandler=handler;

    droppables.each(initDroppable);

    // determine icon colors based on dropzone
    function changeIconColor(dropZone, target){
        if($(dropZone).hasClass('placeholder')){
            $(target).css('backgroundColor','#ED7000');
            $(target).css('color','#ffffff');
        } else {
            $(target).css('backgroundColor','#F6A61E');
            $(target).css('color','#001a73');
        }
    }

    function initDroppable(i, element) {

        var insideZone = false;
        var dropZone = '';

        handler.icons[ $(element).attr('data-icon-number')]={name: $(element).attr('data-icon-number'), icon: $(element).attr('data-icon'), pos: $(element).parent().attr('data-dropzone-number'), picked:false}

        Draggable.create(element, {
            onDrag: function() {

                insideZone = false;

                for (var i = 0; i < dropZones.length; i++) {
                    if (this.hitTest(dropZones[i], overlapThreshold)) {
                        insideZone = true;
                        dropZone = dropZones[i];
                        break;
                    }
                }
            },
            onDragEnd: function() {

                // icon is not within dropzone => send back to original position
                if (!insideZone) {

                    gsap.to(this.target, 0.2, {
                        x: 0,
                        y: 0
                    });

                    let dropZone = $(this.target).parent();
                    changeIconColor(dropZone, this.target);

                } else {


                    // place is already taken
                    if($(dropZone).children().length > 0 ) {

                        // send back to the start
                        gsap.to(this.target, 0.2, {
                            x: 0,
                            y: 0
                        });
                        let dropZone = $(this.target).parent();
                        changeIconColor(dropZone, this.target);

                    }
                    else {

                        Flip.fit(this.target, dropZone, {
                            duration: .1,
                            ease: "power1.inOut",
                        });

                      if ($(dropZone).attr('data-dropzone-type') === 'destination') {
                            var id = $(this.target).attr('data-icon-number');
                            handler.icons[id].picked = true;
                            handler.icons[id].pos = $(dropZone).attr('data-dropzone-number');
                            console.log('picked', handler);
                        } else {
                            var id = $(this.target).attr('data-icon-number');
                            handler.icons[id].picked = false;
                            handler.icons[id].pos = $(dropZone).attr('data-dropzone-number');
                            console.log('unpicked', handler);
                        }

                        var count = 0;
                        $.each(handler.icons, function (i, icon) {
                            if (icon.picked)
                                count++;
                        });

                        $('.draggable-icons').attr('data-picked-count', count);

                        changeIconColor(dropZone, this.target);
/*
                        if ($(dropZone).hasClass('placeholder')) {

                            $(this.target).css('backgroundColor', '#2E318F');
                            $(this.target).css('color', '#ffffff');

                        } else {
                            $(this.target).css('backgroundColor', '#BFC2E6');
                            $(this.target).css('color', '#2E318F');
                        }

 */

                        if (typeof handler.onChange === 'function') {
                            handler.onChange($(this.target).closest('[data-sensor-type="iconpicklist"]').attr('sensor-name'), handler.icons);
                        }
                    }

                }

            }
        });
    }

    handler.get=function(){return handler.icons;};
    handler.set=function(data){

        console.log(data);

        $.each(data.picked, function(i,pick){
            let targetIcon = $('[data-icon-number="'+pick.name+'"]');
            let targetDropzone = $('[data-dropzone-type="destination"][data-dropzone-number="'+pick.pos+'"]');
            $.each(handler.icons, function(i, hi){
                if (hi.name==pick.name)
                {
                    hi.pos=pick.pos;
                    hi.picked=true;
                }
            });
            $(targetIcon).appendTo(targetDropzone);
        });
        $.each(data.available, function(i,pick){
            let targetIcon = $('[data-icon-number="'+pick.name+'"]');
            let targetDropzone = $('[data-dropzone-type="departure"][data-dropzone-number="'+pick.pos+'"]');
            $.each(handler.icons, function(i, hi){
                if (hi.name==pick.name) hi.pos=pick.pos;
            });
            $(targetIcon).appendTo(targetDropzone);
        });
    };



    /*
      // define position
      function define_position(id, dropzone) {

          let targetIcon = $('[data-icon-number="'+id+'"]');
          let targetDropzone = $('[data-dropzone-number="'+dropzone+'"]');
          $(targetIcon).appendTo(targetDropzone);

      }
      define_position('1', '30');
      define_position('6', '24');
      */


});
/*******************************************************************/
/* ftrtch dino */
/* [type: JS] [file:interaction-iconpicklist] [173.845] DESIGN*/
/*******************************************************************/
/* 0.8 D>D */
/* db 174 */