/*
Important!!!!

HAD TO TURN ON LIGHTNING 'USE Lightning Web Security in the Session Settings for the javascript to laod
*/
import { LightningElement, api } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';
import Id from '@salesforce/user/Id';
import { ShowToastEvent } from "lightning/platformShowToastEvent";
import { loadStyle, loadScript } from "lightning/platformResourceLoader";

// Static resources
import dayPilotFiles from "@salesforce/resourceUrl/daypilot";
// Controllers

export default class DayTest extends LightningElement {
  ////////////////Variable initialization
    dp;
    dayPilotInitialized=false;
    @api height;

    renderedCallback() {
        if (this.dayPilotInitialized) {
          return;
        }
        this.dayPilotInitialized = true;
        Promise.all([
          loadScript(this, dayPilotFiles),
        ])
          .then(() => {
            console.log('##Made it here');
            this.InitializeUI();
            
          })
          .catch((error) => {
            console.error(error);
            this.dispatchEvent(
              new ShowToastEvent({
                title: "Error loading dayPilot",
                message: error.message,
                variant: "error"
              })
            );
          });
      }

    InitializeUI() {

      const root2 = this.refs.mainCalendar;
      console.log('##This is the refs root ' + JSON.stringify(root2));

      console.log('##Before creating the scheduler');
      this.dp = new window.DayPilot.Scheduler(root2);
      this.dp.snapToGrid = false;  //Added this so the larger zoom periods wouldn't extend the start/end dates.  Prevents snap on mpove
      this.dp.useEventBoxes = "Never";  //Added this so the larger zoom periods wouldn't extend the start/end dates.  Prevents snap on render

      this.dp.treeEnabled= true;
      this.dp.treePreventParentUsage= true;
      this.dp.heightSpec= "Max";
      this.dp.height= 500;
      this.dp.eventMovingStartEndEnabled= true;
      this.dp.eventResizingStartEndEnabled= true;
      this.dp.timeRangeSelectingStartEndEnabled= true;
      this.dp.scale = "Week";
      this.dp.timeHeaders= [
        {groupBy: "Month", format: "MMMM yyyy"},
        {groupBy: "Week",  format: "d"}
      ];
      this.dp.days = 365;
      this.dp.cellWidthSpec="Fixed"
      this.dp.cellWidth=40;
      const 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"}
            ]
        },
    ];

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

        const e = {
            start: new DayPilot.Date("2023-03-05T12:00:00").addDays(start),
            end: new DayPilot.Date("2023-03-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)
        };

        events.push(e);
    };

    this.dp.resources = resources; 
    this.dp.events.list = events;
      console.log('##Before initializing');
      this.dp.init();
      console.log('##After initializing');
    }
    
}