// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**
 * components-widgets.js
 *
 * @package   local_kopere_dashboard
 * @copyright 2026 Eduardo Kraus {@link https://eduardokraus.com}
 * @license   http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/*
Copyright 2017 Ziadin Givan

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

https://github.com/givanz/VvvebJs
*/

Vvveb.ComponentsGroup['Widgets'] = ["widgets/googlemaps", "widgets/embed-video", /* "widgets/chartjs", "widgets/lottie", "widgets/facebookpage", "widgets/paypal", "widgets/instagram", "widgets/twitter", "widgets/openstreetmap", "widgets/facebookcomments"*/];

Vvveb.Components.extend("_base", "widgets/googlemaps", {
    name       : "Google Maps",
    attributes : ["data-component-maps"],
    image      : "icons/map.svg",
    dragHtml   : '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
    html       : '<div data-component-maps><iframe frameborder="0" src="https://maps.google.com/maps?q=Bucharest&z=15&t=q&key=&output=embed" width="100%" height="100%" style="width:100%;height:100%;left:0"></iframe></div>',
    resizable  : true,//show select box resize handlers
    resizeMode : "css",

    //url parameters
    z   : 3, //zoom
    q   : 'Paris',//location
    t   : 'q', //map type q = roadmap, w = satellite
    key : '',

    init : function(node) {
        let iframe = node.querySelector('iframe');
        let url = new URL(iframe.getAttribute("src"));
        let params = new URLSearchParams(url.search);

        this.z = params.get("z");
        this.q = params.get("q");
        this.t = params.get("t");
        this.key = params.get("key");

        document.querySelector(".component-properties input[name=z]").value = this.z;
        document.querySelector(".component-properties input[name=q]").value = this.q;
        document.querySelector(".component-properties select[name=t]").value = this.t;
        document.querySelector(".component-properties input[name=key]").value = this.key;
    },

    onChange : function(node, property, value) {
        map_iframe = node.querySelector('iframe');

        this[property.key] = value;

        mapurl = 'https://maps.google.com/maps?q=' + this.q + '&z=' + this.z + '&t=' + this.t + '&output=embed';

        map_iframe.setAttribute("src", mapurl);

        return node;
    },

    properties : [{
        name      : "Address",
        key       : "q",
        inputtype : TextInput
    }, {
        name      : "Map type",
        key       : "t",
        inputtype : SelectInput,
        data      : {
            options : [{
                value : "q",
                text  : "Roadmap"
            }, {
                value : "w",
                text  : "Satellite"
            }]
        },
    }, {
        name      : "Zoom",
        key       : "z",
        inputtype : RangeInput,
        data      : {
            max  : 20, //max zoom level
            min  : 1,
            step : 1
        }
    }, {
        name      : "Key",
        key       : "key",
        inputtype : TextInput
    }]
});

Vvveb.Components.extend("_base", "widgets/openstreetmap", {
    name       : "Open Street Map",
    attributes : ["data-component-openstreetmap"],
    image      : "icons/map.svg",
    dragHtml   : '<img src="' + Vvveb.baseUrl + 'icons/maps.png">',
    html       : `<div data-component-openstreetmap><iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://www.openstreetmap.org/export/embed.html?bbox=-62.04673002474011%2C16.95487694424327%2C-61.60521696321666%2C17.196751341562923&layer=mapnik"></iframe></div>`,
    resizable  : true,//show select box resize handlers
    resizeMode : "css",

    //url parameters
    bbox  : '',//location
    layer : 'mapnik', //map type

    init : function(node) {
        let iframe = node.querySelector('iframe');
        let url = new URL(iframe.getAttribute("src"));
        let params = new URLSearchParams(url.search);

        this.bbox = params.get("bbox");
        this.layer = params.get("layer");

        document.querySelector(".component-properties input[name=bbox]").value = this.bbox;
        document.querySelector(".component-properties input[name=layer]").value = this.layer;
    },

    onChange : function(node, property, value) {
        map_iframe = node.querySelector('iframe');

        this[property.key] = value;

        mapurl = 'https://www.openstreetmap.org/export/embed.html?bbox=' + this.bbox + '&layer=' + this.layer;

        map_iframe.setAttribute("src", mapurl);

        return node;
    },

    properties : [{
        name      : "Map",
        key       : "bbox",
        inputtype : TextInput
        /*    },{
                name: "Layer",
                key: "layer",
                inputtype: SelectInput,
                data:{
                    options: [{
                        value: "",
                        text: "Default"
                    },{
                        value: "Y",
                        text: "CyclOSM"
                    },{
                        value: "C",
                        text: "Cycle Map"
                    },{
                        value: "T",
                        text: "Transport Map"
                    }]
               }*/
    }]
});

Vvveb.Components.extend("_base", "widgets/embed-video", {
    name       : "Embed Video",
    attributes : ["data-component-video"],
    image      : "icons/youtube.svg",
    dragHtml   : '<img src="' + Vvveb.baseUrl + 'icons/youtube.svg" width="100" height="100">', //use image for drag and swap with iframe on drop for drag performance
    html       : '<div data-component-video style="width:640px;height:480px;"><iframe frameborder="0" src="https://player.vimeo.com/video/24253126?autoplay=false&controls=false&loop=false&playsinline=true&muted=false" width="100%" height="100%"></iframe></div>',

    //url parameters set with onChange
    t            : 'y',//video type
    video_id     : '',//video id
    url          : '', //html5 video src
    autoplay     : false,
    controls     : false,
    loop         : false,
    playsinline  : true,
    muted        : false,
    resizable    : true,//show select box resize handlers
    resizeMode   : "css",//div unlike img/iframe etc does not have width,height attributes need to use css
    youtubeRegex : /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]+)/i,
    vimeoRegex   : /(?:vimeo\.com(?:[^\d]+))(\d+)/i,

    init : function(node) {
        iframe = node.querySelector('iframe');
        video = node.querySelector('video');

        document.querySelector(".component-properties [data-key=url]").style.display = "none";
        document.querySelector(".component-properties [data-key=poster]").style.display = "none";

        //check if html5
        if (video) {
            this.url = video.src;
        } else if (iframe) {//vimeo or youtube
            let src = iframe.getAttribute("src");
            let match;

            if (src && src.indexOf("youtube") && (match = src.match(this.youtubeRegex))) {//youtube
                this.video_id = match[1];
                this.t = "y";
            } else if (src && src.indexOf("vimeo") && (match = src.match(this.vimeoRegex))) { //vimeo
                this.video_id = match[1];
                this.t = "v";
            } else {
                this.t = "h";
            }
        }

        document.querySelector(".component-properties input[name=video_id]").value = this.video_id;
        document.querySelector(".component-properties input[name=url]").value = this.url;
        document.querySelector(".component-properties select[name=t]").value = this.t;
    },

    onChange : function(node, property, value) {
        this[property.key] = value;
        //if (property.key == "t")
        {
            switch (this.t) {
                case 'y':
                    document.querySelector(".component-properties [data-key=video_id]").style.display = "";
                    document.querySelector(".component-properties [data-key=url]").style.display = "none";
                    document.querySelector(".component-properties [data-key=poster]").style.display = "none";

                    newnode = generateElements(`<iframe width="100%" height="100%" allowfullscreen="true" frameborder="0" allow="autoplay"
                                        src="https://www.youtube.com/embed/${this.video_id}?autoplay=${this.autoplay}&controls=${this.controls}&loop=${this.loop}&playsinline=${this.playsinline}&muted=${this.muted}">
                                </iframe>`)[0];
                    break;
                case 'v':
                    document.querySelector(".component-properties [data-key=video_id]").style.display = "";
                    document.querySelector(".component-properties [data-key=url]").style.display = "none";
                    document.querySelector(".component-properties [data-key=poster]").style.display = "none";
                    newnode = generateElements(`<iframe width="100%" height="100%" allowfullscreen="true" frameborder="0" allow="autoplay"
                                        src="https://player.vimeo.com/video/${this.video_id}?autoplay=${this.autoplay}&controls=${this.controls}&loop=${this.loop}&playsinline=${this.playsinline}&muted=${this.muted}">
                                </iframe>`)[0];
                    break;
                case 'h':
                    document.querySelector(".component-properties [data-key=video_id]").style.display = "none";
                    document.querySelector(".component-properties [data-key=url]").style.display = "";
                    document.querySelector(".component-properties [data-key=poster]").style.display = "";
                    newnode = generateElements('<video poster="' + this.poster + '" src="' + this.url + '" ' + (this.autoplay ? ' autoplay ' : '') + (this.controls ? ' controls ' : '') + (this.loop ? ' loop ' : '') + (this.playsinline ? ' playsinline ' : '') + (this.muted ? ' muted ' : '') + ' style="height: 100%; width: 100%;"></video>')[0];
                    break;
            }

            node.querySelector(":scope > iframe,:scope  > video").replaceWith(newnode);
            return node;
        }

        return node;
    },

    properties : [{
        name      : "Provider",
        key       : "t",
        inputtype : SelectInput,
        data      : {
            options : [{
                text  : "Youtube",
                value : "y"
            }, {
                text  : "Vimeo",
                value : "v"
            }, {
                text  : "HTML5",
                value : "h"
            }]
        },
    }, {
        name      : "Video",
        key       : "video_id",
        inputtype : TextInput,
        onChange  : function(node, value, input, component) {

            let youtube = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]+)/i;
            let vimeo = /(?:vimeo\.com(?:[^\d]+))(\d+)/i;
            let id = false;
            let t = false;

            if (((id = value.match(youtube)) && (t = "y")) || ((id = value.match(vimeo)) && (t = "v"))) {
                document.querySelector(".component-properties select[name=t]").value = t;
                document.querySelector(".component-properties select[name=video_id]").value = id[1];

                component.t = t;
                component.video_id = id[1];

                return id[1];
            }

            return node;
        }
    }, {
        name      : "Poster",
        key       : "poster",
        htmlAttr  : "poster",
        inputtype : ImageInput
    }, {
        name      : "Url",
        key       : "url",
        inputtype : TextInput
    }, {
        name      : "Width",
        key       : "width",
        htmlAttr  : "style",
        inline    : false,
        col       : 6,
        inputtype : CssUnitInput
    }, {
        name      : "Height",
        key       : "height",
        htmlAttr  : "style",
        inline    : false,
        col       : 6,
        inputtype : CssUnitInput
    }, {
        key       : "video_options",
        inputtype : SectionInput,
        name      : false,
        data      : {header : "Options"},
    }, {
        name      : "Auto play",
        key       : "autoplay",
        htmlAttr  : "autoplay",
        inline    : true,
        col       : 4,
        inputtype : CheckboxInput
    }, {
        name      : "Plays inline",
        key       : "playsinline",
        htmlAttr  : "playsinline",
        inline    : true,
        col       : 4,
        inputtype : CheckboxInput
    }, {
        name      : "Controls",
        key       : "controls",
        htmlAttr  : "controls",
        inline    : true,
        col       : 4,
        inputtype : CheckboxInput
    }, {
        name      : "Loop",
        key       : "loop",
        htmlAttr  : "loop",
        inline    : true,
        col       : 4,
        inputtype : CheckboxInput
    }, {
        name      : "Muted",
        key       : "muted",
        htmlAttr  : "muted",
        inline    : true,
        col       : 4,
        inputtype : CheckboxInput
    }, {
        name      : "",
        key       : "autoplay_warning",
        inline    : false,
        col       : 12,
        inputtype : NoticeInput,
        data      : {
            type  : 'warning',
            title : 'Autoplay',
            text  : 'Most browsers allow auto play only if video is muted and plays inline'
        }
    }]
});

Vvveb.Components.extend("_base", "widgets/facebookcomments", {
    name       : "Facebook Comments",
    attributes : ["data-component-facebookcomments"],
    image      : "icons/facebook.svg",
    dragHtml   : '<img src="' + Vvveb.baseUrl + 'icons/facebook.svg">',
    html       : '<div  data-component-facebookcomments><script>(function(d, s, id) {\
              let js, fjs = d.getElementsByTagName(s)[0];\
              if (d.getElementById(id)) return;\
              js = d.createElement(s); js.id = id;\
              js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=";\
              fjs.parentNode.insertBefore(js, fjs);\
            }(document, \'script\', \'facebook-jssdk\'));</script>\
            <div class="fb-comments" \
            data-href="' + window.location.href + '" \
            data-numposts="5" \
            data-colorscheme="light" \
            data-mobile="" \
            data-order-by="social" \
            data-width="100%" \
            ></div></div>',
    properties : [{
        name      : "Href",
        key       : "business",
        htmlAttr  : "data-href",
        child     : ".fb-comments",
        inputtype : TextInput
    }, {
        name      : "Item name",
        key       : "item_name",
        htmlAttr  : "data-numposts",
        child     : ".fb-comments",
        inputtype : TextInput
    }, {
        name      : "Color scheme",
        key       : "colorscheme",
        htmlAttr  : "data-colorscheme",
        child     : ".fb-comments",
        inputtype : TextInput
    }, {
        name      : "Order by",
        key       : "order-by",
        htmlAttr  : "data-order-by",
        child     : ".fb-comments",
        inputtype : TextInput
    }, {
        name      : "Currency code",
        key       : "width",
        htmlAttr  : "data-width",
        child     : ".fb-comments",
        inputtype : TextInput
    }]
});
/*
Vvveb.Components.extend("_base", "widgets/instagram", {
    name: "Instagram",
    attributes: ["data-component-instagram"],
    image: "icons/instagram.svg",
    drophtml: '<img src="' + Vvveb.baseUrl + 'icons/instagram.png">',
    html: '<div align=center data-component-instagram>\
            <blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/tsxp1hhQTG/" data-instgrm-version="8" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/tsxp1hhQTG/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">Text</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">A post shared by <a href="https://www.instagram.com/instagram/" style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px;" target="_blank"> Instagram</a> (@instagram) on <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="-">-</time></p></div></blockquote>\
            <script async defer src="//www.instagram.com/embed.js"></script>\
        </div>',
    properties: [{
        name: "Widget id",
        key: "instgrm-permalink",
        htmlAttr: "data-instgrm-permalink",
        child: ".instagram-media",
        inputtype: TextInput
    }],
});
*/
Vvveb.Components.extend("_base", "widgets/twitter", {
    name         : "Twitter",
    attributes   : ["data-component-twitter"],
    image        : "icons/twitter.svg",
    dragHtml     : '<img src="' + Vvveb.baseUrl + 'icons/twitter.svg">',
    html         : '<div data-component-twitter><iframe width="100%" height="100%"src="https://platform.twitter.com/embed/Tweet.html?embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&id=943901463998169088"></iframe></div>',
    resizable    : true,//show select box resize handlers
    resizeMode   : "css",
    twitterRegex : /(?:twitter\.com(?:[^\d]+))(\d+)/i,

    tweet : '',//location
    init  : function(node) {
        let iframe = node.querySelector('iframe');
        let src = iframe.getAttribute("src");
        let url = new URL(src);
        let params = new URLSearchParams(url.search);

        this.tweet = params.get("id");

        if (!this.tweet) {
            if (match = src.match(this.twitterRegex)) {
                this.tweet = match[1];
            }

        }

        document.querySelector(".component-properties input[name=tweet]").value = this.tweet;
    },

    onChange : function(node, property, value) {
        tweet_iframe = node.querySelector('iframe');

        if (property.key == "tweet") {
            this[property.key] = value;

            tweeturl = 'https://platform.twitter.com/embed/Tweet.html?embedId=twitter-widget-0&frame=false&hideCard=false&hideThread=false&id=' + this.tweet;

            tweet_iframe.setAttribute("src", tweeturl);
        }

        return node;
    },

    properties : [{
        name      : "Tweet",
        key       : "tweet",
        inputtype : TextInput,
        onChange  : function(node, value, input, component) {

            let twitterRegex = /(?:twitter\.com(?:[^\d]+))(\d+)/i;
            let id = false;

            if (id = value.match(twitterRegex)) {
                document.querySelector(".component-properties input[name=tweet]").value = id[1];

                component.tweet = id[1];
                return id[1];
            }

            return node;
        }
    }]
});

Vvveb.Components.extend("_base", "widgets/paypal", {
    name       : "Paypal",
    attributes : ["data-component-paypal"],
    image      : "icons/paypal.svg",
    html       : '<form action="https://www.paypal.com/cgi-bin/webscr" method="post" data-component-paypal>\
\
                <input type="hidden" name="business"\
                    value="givanz@yahoo.com">\
\
                <!-- Specify a Donate button. -->\
                <input type="hidden" name="cmd" value="_donations">\
\
                <!-- Specify details about the contribution -->\
                <input type="hidden" name="item_name" value="VvvebJs">\
                <input type="hidden" name="item_number" value="Support">\
                <input type="hidden" name="currency_code" value="USD">\
\
                <!-- Display the payment button. -->\
                <input type="image" name="submit"\
                src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif"\
                alt="Donate">\
                <img alt="" width="1" height="1"\
                src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" >\
\
            </form>',
    properties : [{
        name      : "Email",
        key       : "business",
        htmlAttr  : "value",
        child     : "input[name='business']",
        inputtype : TextInput
    }, {
        name      : "Item name",
        key       : "item_name",
        htmlAttr  : "value",
        child     : "input[name='item_name']",
        inputtype : TextInput
    }, {
        name      : "Item number",
        key       : "item_number",
        htmlAttr  : "value",
        child     : "input[name='item_number']",
        inputtype : TextInput
    }, {
        name      : "Currency code",
        key       : "currency_code",
        htmlAttr  : "value",
        child     : "input[name='currency_code']",
        inputtype : TextInput
    }],
});

Vvveb.Components.extend("_base", "widgets/facebookpage", {
    name       : "Facebook Page Plugin",
    attributes : ["data-component-facebookpage"],
    image      : "icons/facebook.svg",
    dropHtml   : '<img src="' + Vvveb.baseUrl + 'icons/facebook.png">',
    html       : `<div data-component-facebookpage><div class="fb-page"
             data-href="https://www.facebook.com/facebook"
             data-tabs="timeline"
             data-width=""
             data-height=""
             data-small-header="true"
             data-adapt-container-width="true"
             data-hide-cover="false"
             data-show-facepile="true">

                <blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore">
                    <a href="https://www.facebook.com/facebook">Facebook</a>
                </blockquote>

            </div>

            <div id="fb-root"></div>
            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ro_RO/sdk.js#xfbml=1&version=v15.0" nonce="o7Y7zPjy"></script>
        </div>`,

    properties : [{
        name      : "Small header",
        key       : "small-header",
        htmlAttr  : "data-small-header",
        child     : ".fb-page",
        inputtype : TextInput
    }, {
        name      : "Adapt container width",
        key       : "adapt-container-width",
        htmlAttr  : "data-adapt-container-width",
        child     : ".fb-page",
        inputtype : TextInput
    }, {
        name      : "Hide cover",
        key       : "hide-cover",
        htmlAttr  : "data-hide-cover",
        child     : ".fb-page",
        inputtype : TextInput
    }, {
        name      : "Show facepile",
        key       : "show-facepile",
        htmlAttr  : "data-show-facepile",
        child     : ".fb-page",
        inputtype : TextInput
    }, {
        name      : "App Id",
        key       : "appid",
        htmlAttr  : "data-appId",
        child     : ".fb-page",
        inputtype : TextInput
    }],
    onChange   : function(node, input, value, component) {

        let newElement = generateElements(this.html)[0];
        newElement.find(".fb-page").setAttribute(input.htmlAttr, value);

        frameHead.querySelector("[data-fbcssmodules]").remove();
        frameBody.querySelector("[data-fbcssmodules]").remove();
        frameHead.querySelector("script[src^='https://connect.facebook.net']").remove();

        node.parent().html(newElement.html());
        return newElement;
    }
});

Vvveb.Components.extend("_base", "widgets/chartjs", {
    name       : "Chart.js",
    attributes : ["data-component-chartjs"],
    image      : "icons/chart.svg",
    dragHtml   : '<img src="' + Vvveb.baseUrl + 'icons/chart.svg">',
    html       : '<div data-component-chartjs class="chartjs" data-chart=\'{\
            "type": "line",\
            "data": {\
                "labels": ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],\
                "datasets": [{\
                    "data": [12, 19, 3, 5, 2, 3],\
                    "fill": false,\
                    "borderColor":"rgba(255, 99, 132, 0.2)"\
                },{\
                    "fill": false,\
                    "data": [3, 15, 7, 4, 19, 12],\
                    "borderColor": "rgba(54, 162, 235, 0.2)"\
                }]\
            }}\' style="min-height:240px;min-width:240px;width:100%;height:100%;position:relative">\
              <canvas></canvas>\
            </div>',
    chartjs    : null,
    ctx        : null,
    node       : null,

    config : {
        /*
                    type: 'line',
                    data: {
                        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
                        datasets: [{
                            data: [12, 19, 3, 5, 2, 3],
                            fill: false,
                            borderColor:'rgba(255, 99, 132, 0.2)',
                        },{
                            fill: false,
                            data: [3, 15, 7, 4, 19, 12],
                            borderColor: 'rgba(54, 162, 235, 0.2)',
                        }]
                    },*/
    },

    dragStart : function(node) {
        //check if chartjs is included and if not add it when drag starts to allow the script to load
        body = Vvveb.Builder.frameBody;

        if (document.getElementById("#chartjs-script")) {
            body.append(generateElements('<script id="chartjs-script" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>')[0]);
            body.append(generateElements('<script>\
                $(document).ready(function() {\
                    $(".chartjs").each(function () {\
                        ctx = $("canvas", this).get(0).getContext("2d");\
                        config = JSON.parse(this.dataset.chart);\
                        chartjs = new Chart(ctx, config);\
                    });\
                \});\
              </script>')[0]);
        }

        return node;
    },

    drawChart : function() {
        if (this.chartjs != null) this.chartjs.destroy();
        this.node.dataset.chart = JSON.stringify(this.config);

        config = Object.assign({}, this.config);//avoid passing by reference to avoid chartjs to fill the object
        this.chartjs = new Chart(this.ctx, config);
    },

    init : function(node) {
        this.node = node;
        this.ctx = node.querySelector("canvas").getContext("2d");
        this.config = JSON.parse(node.dataset.chart);
        this.drawChart();

        return node;
    },

    beforeInit : function(node) {
        return node;
    },

    properties : [{
        name      : "Type",
        key       : "type",
        inputtype : SelectInput,
        data      : {
            options : [{
                text  : "Line",
                value : "line"
            }, {
                text  : "Bar",
                value : "bar"
            }, {
                text  : "Pie",
                value : "pie"
            }, {
                text  : "Doughnut",
                value : "doughnut"
            }, {
                text  : "Polar Area",
                value : "polarArea"
            }, {
                text  : "Bubble",
                value : "bubble"
            }, {
                text  : "Scatter",
                value : "scatter"
            }, {
                text  : "Radar",
                value : "radar"
            }]
        },
        init      : function(node) {
            return JSON.parse(node.dataset.chart).type;
        },
        onChange  : function(node, value, input, component) {
            component.config.type = value;
            component.drawChart();

            return node;
        }
    }]
});

function lottieAfterDrop(node) {
    //check if lottie js is included and if not add it when drag starts to allow the script to load
    body = Vvveb.Builder.frameBody;

    if (!body.querySelector("#lottie-js")) {
        let lib = document.createElement('script');
        let code = document.createElement('script');
        lib.id = 'lottie-js';
        lib.type = 'text/javascript';
        lib.src = 'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js';
        code.type = 'text/javascript';
        code.text = `
        let lottie = [];
        function initLottie(onlyNew = false) {
            if (typeof bodymovin == "undefined") return;

            let list = document.querySelectorAll('.lottie' + (onlyNew ? ":not(.lottie-initialized)" : "") );
            list.forEach(el => {
                el.replaceChildren();
                let animItem = bodymovin.loadAnimation({
                  wrapper: el,
                  animType: 'svg',
                  loop: (el.dataset.loop  == "true" ? true : false),
                  autoplay: (el.dataset.autoplay == "true" ? true : false),
                  path: el.dataset.path
                });

            });
        }

        if (document.readyState !== 'loading') {
            initLottie();
          } else {
            document.addEventListener('DOMContentLoaded', initLottie);
          }`;

        body.appendChild(lib);
        body.appendChild(code);

        lib.addEventListener('load', function() {
            Vvveb.Builder.iframe.contentWindow.initLottie();
        });
    } else {
        Vvveb.Builder.iframe.contentWindow.initLottie(true);
    }

    return node;
};

Vvveb.Components.add("widgets/lottie", {
    name       : "Lottie",
    image      : "icons/lottie.svg",
    attributes : ["data-component-lottie"],
    html       : `
      <div class="lottie" data-component-lottie data-path="https://labs.nearpod.com/bodymovin/demo/markus/isometric/markus2.json" data-loop="true" data-autoplay="true">
      </div>
    `,
    afterDrop  : lottieAfterDrop,

    onChange : function(node, property, value) {
        Vvveb.Builder.iframe.contentWindow.initLottie();
        Vvveb.Builder.selectNode(node);
        return node;
    },

    properties : [{
        name      : "Path",
        key       : "path",
        //inputtype: ImageInput,
        inputtype : TextInput,
        htmlAttr  : "data-path",
    }, {
        name      : "Autoplay",
        key       : "autoplay",
        htmlAttr  : "data-autoplay",
        inputtype : CheckboxInput,
        inline    : true,
        col       : 4
    }, {
        name      : "Loop",
        key       : "loop",
        htmlAttr  : "data-loop",
        inputtype : CheckboxInput,
        inline    : true,
        col       : 4
    }]
});
