import { Component } from '@angular/core';
import { mobiscroll, MbscRangeOptions, MbscListviewOptions } from '@mobiscroll/angular';

mobiscroll.settings = {
    lang: ' '
    theme: 'ios',
    themeVariant: 'light'
};

let now = new Date();

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor() {
        let i,
            item,
            tempTime;

        // Genarate random dates
        for (i = 0; i < this.data.length; i++) {
            item = this.data[i];
            tempTime = new Date(
                now.getFullYear(),
                now.getMonth(),
                now.getDate() + (i > 5 ? (i - 5) : 0),
                now.getHours() + i * 2,
                Math.round((now.getMinutes() + i * 5) / 5) * 5);
            item.date = tempTime;
            item.formatedTime = mobiscroll.util.datetime.formatDate('D d hh:ii', tempTime);
        }

        this.filter();
    }

    filteredData:any = [];

    filters: any = {
        range: 'today',
        calls: true,
        meetings: true,
        customRange: [
            new Date(now.getFullYear(), now.getMonth(), now.getDate()),
            new Date(now.getFullYear(), now.getMonth(), now.getDate() + 6)
        ]
    }

    data = [{
        id: 1,
        name: "Owen Adams",
        company: "Sunholdings Corp.",
        icon: "phone",
        type: "call"
    }, {
        id: 2,
        name: "Kian Phillips",
        company: "sol-flex Corp.",
        icon: "location",
        type: "meeting"
    }, {
        id: 3,
        name: "Robert Bradley",
        company: "Silvermedia",
        icon: "location",
        type: "meeting"
    }, {
        id: 4,
        name: "Lydia Young",
        company: "Zimplex",
        icon: "phone",
        type: "call"
    }, {
        id: 5,
        name: "Hollie Hudson",
        company: "Stanelectrics",
        icon: "location",
        type: "meeting"
    }, {
        id: 6,
        name: "Lynn Elliott",
        company: "Techhex",
        icon: "location",
        type: "meeting"
    }, {
        id: 7,
        name: "Konner Murray",
        company: "HACME Corp.",
        icon: "phone",
        type: "call"
    }, {
        id: 8,
        name: "Morgan Downs",
        company: "Itex Corp.",
        icon: "location",
        type: "meeting"
    }, {
        id: 9,
        name: "Warren Boone",
        company: "Sumline",
        icon: "location",
        type: "meeting"
    }, {
        id: 10,
        name: "Charlie Jenkins",
        company: "Quaddoex",
        icon: "phone",
        type: "call"
    }, {
        id: 11,
        name: "Jillian Hobbs",
        company: "Indizap",
        icon: "location",
        type: "meeting",
        formatedTime: ''
    }, {
        id: 12,
        name: "Donald Mccormick",
        company: "Zootrax",
        icon: "phone",
        type: "call"
    }, {
        id: 13,
        name: "Luke Harper",
        company: "Unihouse",
        icon: "phone",
        type: "call"
    }, {
        id: 14,
        name: "Leah West",
        company: "Ap-care",
        icon: "phone",
        type: "call"
    }, {
        id: 15,
        name: "Billie Rivas",
        company: "Technoit Corp.",
        icon: "location",
        type: "meeting"
    }, {
        id: 16,
        name: "Janae Diaz",
        company: "Plex-ron Corp.",
        icon: "location",
        type: "meeting"
    }, {
        id: 17,
        name: "Raquel Bentley",
        company: "Silicon-lax",
        icon: "phone",
        type: "call"
    }, {
        id: 18,
        name: "Harley Burke",
        company: "Lamzone",
        icon: "location",
        type: "meeting"
    }];

    listviewSettings: MbscListviewOptions = {
        enhance: true,
        swipe: false,
        striped: true
    };

    filter() {
        var i,
            item,
            start,
            end,
            range,
            filteredData = [];

        switch (this.filters.range) {
            case 'today':
                start = new Date(now.setHours(0, 0, 0, 0));
                end = new Date(now.setHours(23, 59, 59, 999));
                break;
            case 'week':
                start = new Date(now.setHours(0, 0, 0, 0));
                end = new Date(
                    now.getFullYear(),
                    now.getMonth(),
                    now.getDate() + (7 - now.getDay()), 23, 59, 59, 999
                );
                break;
            default:
                range = this.filters.customRange;
                start = range[0];
                end = range[1];
        }

        for (i = 0; i < this.data.length; i++) {
            item = this.data[i];
            if ((
                    (item.type == 'call' && this.filters.calls) ||
                    (item.type == 'meeting' && this.filters.meetings)
                ) && (item.date >= start) && (item.date <= end)) {
                filteredData.push(item);
            }
        }

        this.filteredData = filteredData;
    }

    onChange() {
        setTimeout(() => {
            this.filter();
        });
    }
}