import { Component, ChangeDetectionStrategy, OnInit, ViewChild, AfterViewInit} from '@angular/core';
import {Router} from "@angular/router";
import {ApiService} from "../api.service";
import {SchedulerDataService} from "./schedulerData.service";
import {DayPilot, DayPilotSchedulerComponent} from 'daypilot-pro-angular';

declare var swal: any;
declare var $: any;

interface FileReaderEventTarget extends EventTarget {
    result: string
}

interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;

    getMessage(): string;
}

@Component({
    selector: 'scheduler-component',
    moduleId: module.id,
    changeDetection: ChangeDetectionStrategy.OnPush,
    templateUrl: 'dashboard.component.html'
})

export class DashboardComponent  implements OnInit, AfterViewInit {
    public cars: any;
    @ViewChild('scheduler')
    scheduler: DayPilotSchedulerComponent;

    events: any[] = [
        {
            "id": 1,
            "resource": "R1",
            "start": "2018-09-12T00:00:00",
            "end": "2018-09-24T00:00:00",
            "text": "Event 1"
        },
        {
            "id": 2,
            "resource": "R2",
            "start": "2018-09-09T00:00:00",
            "end": "2018-09-17T00:00:00",
            "text": "Event 2"
        }
    ];

    config: any = {
        locale: "en-us",
        cellWidthSpec: "Fixed",
        cellWidth: 40,
        crosshairType: "Header",
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"}],
        scale: "Day",
        days: DayPilot.Date.today().daysInMonth(),
        startDate: DayPilot.Date.today().firstDayOfMonth(),
        showNonBusiness: true,
        businessWeekends: false,
        floatingEvents: true,
        eventHeight: 30,
        eventMovingStartEndEnabled: false,
        eventResizingStartEndEnabled: false,
        timeRangeSelectingStartEndEnabled: false,
        groupConcurrentEvents: false,
        eventStackingLineHeight: 100,
        allowEventOverlap: true,
        timeRangeSelectedHandling: "Enabled",
        onTimeRangeSelected: function (args) {
            var dp = this;
            DayPilot.Modal.prompt("Create a new event:", "Event 1").then(function(modal) {
                dp.clearSelection();
                if (!modal.result) { return; }
                dp.events.add(new DayPilot.Event({
                    start: args.start,
                    end: args.end,
                    id: DayPilot.guid(),
                    resource: args.resource,
                    text: modal.result
                }));
            });
        },

        resources: [
            {
                "name": "Resource 1",
                "id": "R1"
            },
            {
                "name": "Resource 2",
                "id": "R2"
            }
        ]
    };

    constructor(private ds: SchedulerDataService, public router: Router, public service: ApiService) {
        this.service.getCars('114').then(data => {
            this.cars = data.items;
            console.log("auto", this.cars);

        });
    }

    ngAfterViewInit(): void {
    }

   /* public cars: any;
    public carProva = "Fiat Panda";

    @ViewChild("scheduler")
    scheduler: DayPilotSchedulerComponent;

    config: any = {
        locale: "it-it",
        cellWidthSpec: "Auto",
        crosshairType: "Header",
        timeHeaders: [{"groupBy":"Month"},{"groupBy":"Day","format":"d"},{"groupBy":"Cell","format":"tt"}],
        scale: "CellDuration",
        cellDuration: 720,
        days: 32,
        startDate: new Date(Date.now()),
        showNonBusiness: true,
        businessWeekends: false,
        floatingEvents: false,
        eventHeight: 30,
        eventMovingStartEndEnabled: false,
        eventResizingStartEndEnabled: false,
        timeRangeSelectingStartEndEnabled: false,
        groupConcurrentEvents: false,
        eventStackingLineHeight: 100,
        allowEventOverlap: false,
        timeRangeSelectedHandling: "Disabled",
        eventMoveHandling: "Disabled",
        eventResizeHandling: "Disabled",
        eventDeleteHandling: "Disabled",
        eventClickHandling: "Enabled",
        onEventClicked: function (args) {
            this.message("Event clicked");
        },
        eventHoverHandling: "Disabled",
        resources: [
            {
                "name": this.carProva,
                "id": "R1"
            },
            {
                "name": "Resource 2",
                "id": "R2"
            }
        ],
        events: [
            {
                "id": 1,
                "resource": "R1",
                "start": "2018-09-04T00:00:00",
                "end": "2018-09-16T00:00:00",
                "text": this.carProva,
                "bubbleHtml": "<div style='font-weight:bold'>Event Details</div><div>Scheduler Event 1</div>"
            },
            {
                "id": 2,
                "resource": "R2",
                "start": "2018-09-06T00:00:00",
                "end": "2018-09-11T00:00:00",
                "text": "Event 2"
            }
        ]
        // events: [
        //     {
        //         "id": 1,
        //         "resource": "R1",
        //         "start": "2018-09-15T10:00:00",
        //         "end": "2018-09-25T16:00:00",
        //         "text": "Event 1"
        //     },
        //     {
        //         "id": 2,
        //         "resource": "R2",
        //         "start": "2018-09-06T00:00:00",
        //         "end": "2018-09-11T00:00:00",
        //         "text": "Event 2"
        //     }]
    };

    constructor(private ds: SchedulerDataService, public router: Router, public service: ApiService) {
        this.service.getCars('114').then( data => {
            this.cars = data.items;
            console.log("auto",  this.cars);

        });
    }*/


    newCar(){
        this.router.navigate(['/newcar']);

    }
    newBooking(){
        console.log("click");
        this.router.navigate(['/newbooking']);

    }

    ngOnInit(){

    }
}