{% extends "sidebar.html" %}
{% block body%}

<div class="container">
    <div style="width: 4rem;margin:1rem;"></div>
    <div style="width: 10rem; margin: 1rem; font-weight: bold">Calendar</div>
    <div style="display: inline-flex">
        <div style="width: 5rem; margin: 1rem; padding-right: 1rem;font-weight: bold">Show on device</div>
        <div style="width: 2rem; margin: 1rem;font-weight: bold">Color</div>
    </div>
</div>

    {% for item in calendars %}
    <div class="container" style="margin-top: 1.5rem">
        <!--action button-->
        {% if "ical" == item.calType %} 
        <div style="width: 4rem; margin: 1rem;">
            <form action="" method="post">
                <input type="hidden" name="calendar" value={{ item.calendarId }}>
                <input type="submit" name="submit" value="Remove">
            </form> 
        </div>
        {% else %}
        <div style="width: 4rem; margin: 1rem;"></div>
        {% endif %}
        <!--Name-->
        <div style="width: 10rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">{{ item.name }}</div>
        <div style="display: inline-flex">
        <!--Toggle-->
        <div style="width: 5rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem; padding-right: 1rem">
            <!-- Rounded switch -->
            <label class="switch">
                <input class="toggle" id={{item.calendarId}} type="checkbox" toggled={{item.toggle}} onclick="toggleReaction(this)">
                <span class="slider on round"></span>
            </label>
        </div>

        <!--Color Selector-->
        <div style="width: 2rem; margin-left: 1rem; margin-right: 1rem; margin-top: 0.5rem">
        <div class="colorPickSelector" id={{item.calendarId}}  defaultColor={{item.color}}></div>
            <!--svg height="20" width="20">
                <circle cx="10" cy="10" r="10" stroke="black" stroke-width="0" fill={{ item.color }} />
            </svg--> 
        </div>
        </div>
        
    </div>
    {% endfor %}
    <div id=calendars class="container">
    </div>
    <form action="" method="post">
    <div class="container grey" style="margin-top: 3rem;">
        <div>{{ form.hidden_tag() }}</div>
        <div style="display: flex">
        <div style="margin: 1rem">{{ form.calName.label }}</div>
        <div style="margin: 1rem">{{ form.calName(size=24) }}</div>
        </div>
        <div style="display: flex">
        <div style="margin: 1rem">{{ form.iCalURL.label }}</div>
        <div style="margin: 1rem">{{ form.iCalURL(size=24) }}</div>
        </div>
        <div style="with: 8rem; margin: 1rem">{{ form.submit() }}</div>
        {% for error in form.iCalURL.errors %}
        <span style="color: red;">[{{ error }}]</span>
        {% endfor %}
    </div> 
    </form>
    <!--div class="container">
        <a class="button addcalendar" href="/login/google" style="width: auto; margin: 4rem">Add Calendar</a>
    </div--> 

<script type="text/javascript">
    
    
    var init = false;
    
    
    // initialize all DOM items
    $(".colorPickSelector").colorPick({
    'initialColor': '#3498db',
    'allowRecent': true,
    'recentMax': 5,
    'allowCustomColor': false,
    'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
    'onColorSelected': function() {
        if(!init) {
            return;
        }
        // Todo getting the element id is currently done over [0] [#02]
        this.element.css({'backgroundColor': this.color, 'color': this.color});
        
        post("color", this.element[0].id, this.color);
    }
    });

    ($(".toggle").each(function() {
        var toggle = true;
        console.log($(this).attr('toggled'));
        if($(this).attr('toggled') == "True") {
            toggle = false;
        } else if ($(this).attr('toggled') == "False") {
            toggle = true;
        }

        $(this).prop('checked', toggle);
    }));

    ($(".colorPickSelector").each(function() {
        // console.log($( this )[0].attributes.getNamedItem("style"));
        var color = $( this )[0].attributes.getNamedItem("defaultcolor").nodeValue;
        var style = document.createAttribute("style");
        style.value = 'background-color: ' + color + '; color: ' + color + ';';
        $( this )[0].attributes.setNamedItem(style); 

        // console.log($( this )[0].attributes.getNamedItem("style"));
        
    }));

    function post(type, id, data) {
        var url = "calendar";
        var method = "POST";
        switch (type) {
            case "color":
                var postData = JSON.stringify({"calendar_id": id.toString(), "color": data.toString()});
                break;
            case "toggle":
                var postData = JSON.stringify({"calendar_id": id.toString(), "toggle": data.toString()})        
                break;
            default:
                break;
        }
        console.log(postData);

        var shouldBeAsync = true;

        var request = new XMLHttpRequest();
        request.onload = function () {
            var status = request.status;
            var data = request.responseText;
        }

        request.open(method, url, shouldBeAsync);
        // content type json makes app do error 400
        request.setRequestHeader("Content-Type", "application/json");
        request.send(postData);
    }

    function toggleReaction(self) {
        // the slider used defaults to inverted information [#01]
        var data;
        if(self.checked) {
            data = "False";
        } else {
            data = "True";
        }
        post("toggle", self.id, data);
    }
    init = true;
</script>

{% endblock %}