// class AtomeDrag {
//     constructor() {
//     }
//
//     drag(atome_drag_id) {
//         // target elements with the "draggable" class
//         self.current_obj = Opal.Utilities.$grab(atome_drag_id)
//         interact('.'+atome_drag_id)
//             .draggable({
//                 // enable inertial throwing
//                 startAxis: 'x',
//                 lockAxis: 'x',
//                 // lockAxis: ''+lock_axis,
//                 inertia: true,
//                 // keep the element within the area of it's parent
//                 modifiers: [
//                     interact.modifiers.restrictRect({
//                         restriction: 'parent',
//                         endOnly: true
//                     })
//                 ],
//                 // enable autoScroll
//                 autoScroll: true,
//
//                 listeners: {
//                     // call this function on every dragmove event
//
//                     move: dragMoveListener,
//                     start(event) {
// //TODO:  optimise this passing the proc to the drag callback
//                         // lets get the current atome Object
//                         // self.current_obj = Opal.Utilities.$grab(atome_drag_id)
//                         // now get the grab proc
//                         self.proc_meth = current_obj.bloc
//                     },
//                     // call this function on every dragend event
//                     end(event) {
//                     }
//                 }
//             })
//
//         function dragMoveListener(event) {
//             const target = event.target
//             // the code below can be conditioned to receive the drag event without moving the object
//             // keep the dragged position in the data-x/data-y attributes
//             const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
//             const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
//             // translate the element
//             target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
//             // update the position attributes
//             target.setAttribute('data-x', x)
//             target.setAttribute('data-y', y)
//             // CallBack here
//             self.current_obj.$dragCallback(event.pageX, event.pageY, event.rect.left, event.rect.top, self.current_obj, self.proc_meth);
//         }
//     }
//
// }

// Usage:
// let atomeDrag = new AtomeDrag();
// atomeDrag.drag('atome_id', 'options');
const Atomeanimation = {}



// TODO: put in a class


const atome = {
    jsSchedule: function (years, months, days, hours, minutes, seconds, atome, proc) {
        const now = new Date();
        const formatDate = new Date(years, months - 1, days, hours, minutes, seconds);
        const diffTime = Math.abs(formatDate - now);
        setTimeout(function () {
            atome.$schedule_callback(proc);
        }, diffTime);
    },
    jsReader: function (file, atome, proc) {
        fetch('medias/' + file)
            .then(response => response.text())
            .then(text => atome.$read_callback(text, proc))
    },
    js_Fullscreen: function (atome_id){
        let elem = document.getElementById(atome_id)
        if (elem.requestFullscreen) {
            elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) { /* Safari */
            elem.webkitEnterFullscreen();
        } else if (elem.msRequestFullscreen) { /* IE11 */
            elem.msRequestFullscreen();
        }

    }

}


// example ruby equivalent in js //
Opal.queue(function (Opal) {/* Generated by Opal 1.6.0 */
    const $klass = Opal.klass, $defs = Opal.defs, $def = Opal.def;
// The line below create the AtomicJS cons to simplify access to js object from ruby

    // var $const_set = Opal.const_set, $nesting = [], nil = Opal.nil;
    // return $const_set($nesting[0], 'AtomicJS', atome)

    (function ($base, $super) {
        const self = $klass($base, $super, 'Atome_html');
        $def(self, '$initialize', function $$initialize(val) {
            // Init code below
        }, 1);

        $defs(self, '$check_this', function $$check_this(val) {
            // getter code below
            return (val);
        }, 0);

        $def(self, '$way', function $way() {
            // getter code below
            return (self.my_var);
        }, 0);

        return $def(self, '$way=', function $way(val) {
            //self method example
            return (self.my_var = val);
        }, 0);


    })();

    // new class below
    return (function ($base, $super) {
        const self = $klass($base, $super, 'Atome');

        $defs(self, '$verif', function $$verif(val) {
            //self method example
            return (val);
        }, 0);

        $def(self, '$new_method', function $way() {
            // getter code below
            return (self.new_method);
        }, 0);


        return $def(self, '$new_method=', function $way(val) {
            //setter code below
            return (self.atome = val);
        }, 0);

    })();
});