import { LitElement, css, html } from 'lit-element';

import { connect } from 'pwa-helpers/connect-mixin.js';
import { store } from '../store/store.js';



class DispoScheduler extends connect(store)(LitElement) {
    static get styles() {
        return css`
           
        section {
            display: block;
        }

        `;
    }

    static get properties() {
        return {

        };
    }

    constructor() {
        super();

    }

    loadDayPilot() {
        let script = document.createElement('script');
        script.onload = this.dayPilotLoaded.bind(this);
        script.src = './external/daypilot/daypilot-all.min.js';
        return script;
    }

    dayPilotLoaded(e) {
        if (document.readyState != 'loading') {
            this.initDayPilot(undefined);
        } else {
            document.addEventListener("DOMContentLoaded", this.initDayPilot);
        }
    }

    initDayPilot(e) {

        var el = this.shadowRoot.getElementById('dp');

        var dp = new DayPilot.Scheduler(el);

        dp.theme = "scheduler_8";

        dp.startDate = "2020-02-07";
        dp.days = 7;
        dp.scale = "Day";
        dp.timeHeaders = [
            { groupBy: "Month", format: "MMMM yyyy" },
            { groupBy: "Day", format: "d" }
        ];

        dp.contextMenu = new DayPilot.Menu({
            items: [
                { text: "Edit", onClick: function (args) { dp.events.edit(args.source); } },
                { text: "Delete", onClick: function (args) { dp.events.remove(args.source); } },
                { text: "-" },
                { text: "Select", onClick: function (args) { dp.multiselect.add(args.source); } },
            ]
        });

        dp.treeEnabled = true;
        dp.treePreventParentUsage = true;
        dp.resources = [
            {
                name: "Locations", id: "G1", expanded: true, children: [
                    { name: "Room 1", id: "A" },
                    { name: "Room 2", id: "B" },
                    { name: "Room 3", id: "C" },
                    { name: "Room 4", id: "D" }
                ]
            },
            {
                name: "People", id: "G2", expanded: true, children: [
                    { name: "Person 1", id: "E" },
                    { name: "Person 2", id: "F" },
                    { name: "Person 3", id: "G" },
                    { name: "Person 4", id: "H" }
                ]
            },
            {
                name: "Tools", id: "G3", expanded: true, children: [
                    { name: "Tool 1", id: "I" },
                    { name: "Tool 2", id: "J" },
                    { name: "Tool 3", id: "K" },
                    { name: "Tool 4", id: "L" }
                ]
            },
            {
                name: "Other Resources", id: "G4", expanded: true, children: [
                    { name: "Resource 1", id: "R1" },
                    { name: "Resource 2", id: "R2" },
                    { name: "Resource 3", id: "R3" },
                    { name: "Resource 4", id: "R4" }
                ]
            },
        ];

        dp.heightSpec = "Max";
        dp.height = 500;

        dp.events.list = [];

        for (var i = 0; i < 12; i++) {
            var duration = Math.floor(Math.random() * 6) + 1; // 1 to 6
            var durationDays = Math.floor(Math.random() * 6) + 1; // 1 to 6
            var start = Math.floor(Math.random() * 6) + 2; // 2 to 7

            var e = {
                start: new DayPilot.Date("2020-02-05T12:00:00").addDays(start),
                end: new DayPilot.Date("2020-02-05T12:00:00").addDays(start).addDays(durationDays).addHours(duration),
                id: DayPilot.guid(),
                resource: String.fromCharCode(65 + i),
                text: "Event " + (i + 1),
                bubbleHtml: "Event " + (i + 1),
                barColor: barColor(i),
                barBackColor: barBackColor(i)
            };

            dp.events.list.push(e);
        }

        dp.eventMovingStartEndEnabled = true;
        dp.eventResizingStartEndEnabled = true;
        dp.timeRangeSelectingStartEndEnabled = true;

        // event moving
        dp.onEventMoved = function (args) {
            dp.message("Moved: " + args.e.text());
        };

        dp.onEventMoving = function (args) {
            if (args.e.resource() === "A" && args.resource === "B") {  // don't allow moving from A to B
                args.left.enabled = false;
                args.right.html = "You can't move an event from Room 1 to Room 2";

                args.allowed = false;
            }
            else if (args.resource === "B") {  // must start on a working day, maximum length one day
                while (args.start.getDayOfWeek() === 0 || args.start.getDayOfWeek() === 6) {
                    args.start = args.start.addDays(1);
                }
                args.end = args.start.addDays(1);  // fixed duration
                args.left.enabled = false;
                args.right.html = "Events in Room 2 must start on a workday and are limited to 1 day.";
            }

            if (args.resource === "C") {
                var except = args.e.data;
                var events = dp.rows.find(args.resource).events.all();

                var start = args.start;
                var end = args.end;
                var overlaps = events.some(function (item) {
                    return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
                });

                while (overlaps) {
                    start = start.addDays(1);
                    end = end.addDays(1);

                    overlaps = events.some(function (item) {
                        return item.data !== except && DayPilot.Util.overlaps(item.start(), item.end(), start, end);
                    });
                }

                if (args.start !== start) {
                    args.start = start;
                    args.end = end;

                    args.left.enabled = false;
                    args.right.html = "Start automatically moved to " + args.start.toString("d MMMM, yyyy");
                }

            }
        };

        // event resizing
        dp.onEventResized = function (args) {
            dp.message("Resized: " + args.e.text());
        };

        // event creating
        dp.onTimeRangeSelected = function (args) {
            DayPilot.Modal.prompt("New event name:", "New Event").then(function (modal) {
                dp.clearSelection();
                var name = modal.result;
                if (!name) return;
                var e = new DayPilot.Event({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: name
                });
                dp.events.add(e);
                dp.message("Created");
            });
        };

        dp.onEventMove = function (args) {
            if (args.ctrl) {
                var newEvent = new DayPilot.Event({
                    start: args.newStart,
                    end: args.newEnd,
                    text: "Copy of " + args.e.text(),
                    resource: args.newResource,
                    id: DayPilot.guid()  // generate random id
                });
                dp.events.add(newEvent);

                // notify the server about the action here

                args.preventDefault(); // prevent the default action - moving event to the new location
            }
        };

        dp.init();

        dp.scrollTo("2020-02-01");

        function barColor(i) {
            var colors = ["#3c78d8", "#6aa84f", "#f1c232", "#cc0000"];
            return colors[i % 4];
        }
        function barBackColor(i) {
            var colors = ["#a4c2f4", "#b6d7a8", "#ffe599", "#ea9999"];
            return colors[i % 4];
        }


    }


    render() {
        return html`
            <link type="text/css" rel="stylesheet" href="./external/daypilot/scheduler_8.css" />
            <div id="dp"></div>

            ${this.loadDayPilot()}
    `;
    }

    stateChanged(state) {
        //   this.selector_sorting = state.dispograph.selector_sorting || this.selector_sorting;

    }
}

customElements.define('dispo-scheduler', DispoScheduler);