import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation, Injector, Input, EventEmitter, Output, OnChanges, AfterViewInit } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
// import { GanttEditorComponent, GanttEditorOptions } from 'ng-gantt';
import { SupportTicketServiceProxy, OrganizationUnitDto, TicketStatusCodeDto, TicketEffortHoursDto, TenantListDropDown, TicketStatusList, TicketTypeList } from '@shared/service-proxies/service-proxies';
import { Table } from 'primeng/components/table/table';
import { Paginator } from 'primeng/components/paginator/paginator';
import { LazyLoadEvent } from 'primeng/components/common/lazyloadevent';
import { PrimengTableHelper } from 'shared/helpers/PrimengTableHelper';
// import { Service, Task, Dependency, Resource, ResourceAssignment } from './service';
import { gantt, Gantt } from 'dhtmlx-gantt';
import * as moment from 'moment';
@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'gantt',
    templateUrl: './gantt-chart.component.html',
    styleUrls: ['./gantt-chart.less'],
})

export class GanttComponent extends AppComponentBase implements OnInit {
    // public editorOptions: GanttEditorOptions;
    primengTableHelperTickets = new PrimengTableHelper();

    @ViewChild('editor', { static: true }) ganttContainer: ElementRef;
    // @ViewChild("editor" , { static: true }) editor: GanttEditorComponent;
    @ViewChild('dataTableTickets', { static: true }) dataTableTickets: Table;
    @ViewChild('paginatorTickets', { static: true }) paginatorTickets: Paginator;
    @Input('data') data: any;
    @Output('update') change: EventEmitter<any> = new EventEmitter<any>();
    advancedFiltersAreShown = false;
    filterText = '';
    tester = '';
    assignedToFilter = '';
    statusFilter = '';
    typeFilter = '';
    createdBy = '';
    priorityFilter: any;
    tenant: any;
    update: Array<any> = [];
    ticketTypes: TicketTypeList[] = [];
    ticketStatuses: TicketStatusList[] = [];
    tenantList: TenantListDropDown[] = [];
    supportTicketSettingList: any;
    tenancy: boolean = false;
    hostList: any;
    totalTicket: any
    totalNewTicket: any;
    totalAssignedTicket: any;
    totalClosedTicket: any;
    totalTodayClosedTicket: any;
    totalFeatureChangeTicket: any;
    totalBugTicket: any;
    totalNewFeatureTicket: any;
    totalMyTicket: any;
    totalMyCreateTicket: any;
    totalUnAssignedTicket: any;
    todayFilter: any;
    myTickerFilter: any;
    openTicketFilter: any;
    dateFrom: any;
    dateTo: any;
    resultGroup: any;
    hideHeader: boolean;
    effortHours: TicketEffortHoursDto[];
    dueDate: any;
    versionList: any;
    startDate: any;
    effortHour: number;
    //public dateRange: moment.Moment[] = [moment().startOf('day'), moment().endOf('day')];

    checkSettings = false;
    tenantIds: Array<any> = [];
    searchArray: any;
    parentStatusType: TicketStatusCodeDto[];
    parentStatusTypeId: number;
    categoryTypes: any
    categoryFilter: any
    typeFilterCode: any
    statusFilterCode: any;
    parentStatusTypeIds: any;
    hideIcon: boolean = false;
    hideDetail: boolean = true;
    versionId: any;
    organizationId: any;
    organizationUnits: OrganizationUnitDto[] = [];
    ganttData: any;
    constructor(
        injector: Injector,
        private _supportTicketsServiceProxy: SupportTicketServiceProxy,
    ) {
        super(injector);
        // this.editorOptions = new GanttEditorOptions();
        // this.editorOptions = {
        //     vCaptionType: 'Duration',  
        //     vFormat: "day",
        //     vLang: 'en',
        //     vQuarterColWidth: 36,
        //     vUseSingleCell: 10000,
        //     vEditable: false,
        //     vAdditionalHeaders: { // Add data columns to your table
        //         category: {
        //           title: 'Status'
        //         },
        //         sector: {
        //             title: 'Ticket Id'
        //           },
        //       },
        //       vColumnOrder:[ 'vAdditionalHeaders','vShowRes','vShowDur','vShowComp','vShowStartDate','vShowEndDate']
        //   };
        // this.change.emit();

    }

    ngOnInit(): void {
        $('#kt_aside_toggler').trigger('click');
        this.ganttData = [];
        this.getCharts();
    }

    ngAfterViewInit(): void {
        var that = this;
        $('.gtaskheading.gcomp').text("Progress");
        $('.gtasktableh .gtaskname').eq(1).addClass('gtaskheading').text("Tickets");

        $('.gantt-refresh').on('click', function (e) {
            that.getCharts();
        });
    }

    getCharts() {

        this.searchArray = JSON.parse(localStorage.getItem('ticketFilter'));
        this.statusFilter = this.searchArray.statusFilter;
        this.typeFilter = this.searchArray.typeFilter;
        this.tenant = this.searchArray.tenant;
        this.parentStatusTypeId = 0;

        this.priorityFilter = $("#priority").val() == "" ?
            undefined :
            $("#priority").val();

        // this.effortHour = $("#effortHours").val() == "" ?
        //     0 :
        //     $("#effortHours").val();

        this.statusFilter = (this.statusFilter == 'none') ? '' : this.statusFilter;

        this.typeFilter = (this.typeFilter == 'none') ? '' : this.typeFilter;
        this.tenant = $("#tenant").val() == 0 ?
            undefined :
            $("#tenant").val();
        this.categoryFilter = $("#categoryFilter").val() == 0 ?
            undefined :
            $("#categoryFilter").val();

        this.typeFilterCode = $("#type").val() == 0 ? undefined : $("#type").val();
        this.organizationId = $("#unit2").val() == 0 ? undefined : $("#unit2").val();
        this.statusFilterCode = $("#status").val() == 0 ? undefined : $("#status").val();
        this.parentStatusTypeIds = $("#parentStatusId").val() == 0 ? undefined : $("#parentStatusId").val();
        this.spinnerService.show();
        this.versionId = $("#version").val() == 0 ? undefined : $("#version").val();

        this._supportTicketsServiceProxy.getTicket(
            this.filterText,
            this.assignedToFilter,
            this.tester,
            this.statusFilter,
            this.statusFilterCode,
            this.typeFilter,
            this.typeFilterCode,
            this.dateFrom,
            this.dateTo,
            this.createdBy,
            this.priorityFilter,
            this.tenant,
            this.parentStatusTypeId,
            this.parentStatusTypeIds,
            this.categoryFilter,
            this.organizationId,
            this.todayFilter,
            this.myTickerFilter,
            this.openTicketFilter,
            this.startDate,
            this.dueDate,
            this.effortHour,
            this.versionId,
            localStorage.getItem('sorting'),
            parseInt(localStorage.getItem('skipCount')),
            parseInt(localStorage.getItem('maxResultCount'))
        ).subscribe(result => {
            this.spinnerService.hide();
            this.ganttData = [];
            for (let index = 0; index < result.items.length; index++) {

                this.ganttData.push({
                    id: result.items[index].id,
                    description: "<a target='_blank' href='app/sprintship/edit-ticket/" + result.items[index].id + "'>" + result.items[index].shortDescription + "</a>",
                    text: "",//result.items[index].shortDescription,
                    start_date: moment(result.items[index].startDate).format('YYYY-MM-DD') == '0001-01-01' ? "" : moment(result.items[index].startDate).format('YYYY-MM-DD'),
                    end_date: moment(result.items[index].dueDate).format('YYYY-MM-DD') == '0001-01-01' ? "" : moment(result.items[index].dueDate).format('YYYY-MM-DD'),
                    assignee: result.items[index].assignedTo == "" ? "Unassigned" : result.items[index].assignedTo,
                    progress: result.items[index].progress,
                    completion: result.items[index].completionRate,
                    parent: result.items[index].parentTicketId == null ? 0 : result.items[index].parentTicketId,
                    open: true,
                    color: result.items[index].ticketStatusColor,
                    duration: moment(result.items[index].startDate).diff(moment(result.items[index].dueDate)),
                    status: moment(result.items[index].dueDate).format('YYYY-MM-DD') == '0001-01-01' || moment(result.items[index].startDate).format('YYYY-MM-DD') == '0001-01-01' ? "<span style='background: " + result.items[index].ticketStatusColor + ";color: #fff;padding: 4px;border-radius: 3px;' class='gantt-notif-container'>" + '<i class="fas fa-exclamation-triangle" style="color:#fff"></i><span class="gantt-notif"> No date assigned</span> ' + result.items[index].ticketStatus + "</span>" : "<span style='background: " + result.items[index].ticketStatusColor + ";color: #fff;padding: 4px;border-radius: 3px;'>" + result.items[index].ticketStatus + "</span>"

                });
            }

            const taskData = {
                data: this.ganttData,
                links: []
            };
            gantt.clearAll(); 
            $('#desc').text("Total Tickets: "+this.ganttData.length);
            gantt.plugins({
                tooltip: true
            });

            gantt.templates.progress_text = function (start, end, task) {
                return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + "% </span>";
            };

            gantt.templates.tooltip_text = function (start, end, task) {
                return "<span style='padding: 5px;display: block;padding-bottom: 0px;'><b >Task: </b> " + task.description +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>Id: </b> " + task.id +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>Start date:</b> " + gantt.templates.tooltip_date_format(start) +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>End date:</b> " + gantt.templates.tooltip_date_format(end) +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>Assignee:</b> " + task.assignee +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>Status:</b> " + task.status +
                    "<br/></span> <span style='padding: 5px;display: block;padding-bottom: 0px;'><b>Completion:</b> " + task.completion;
            };

            gantt.config.columns = [
                { name: "description", label: "Task name", tree: true, width: 350, max_width: 350, min_width: 350 },
                { name: "assignee", label: "Assignee", width: 100, max_width: 100, min_width: 100, align: "center" },
                { name: "start_date", label: "Start time", width: 80, max_width: 80, min_width: 80, align: "center" },
                { name: "end_date", label: "End time", width: 80, max_width: 80, min_width: 80, align: "center" },
                { name: "duration", label: "Duration", width: 80, max_width: 80, min_width: 80, align: "center" },
                { name: "completion", label: "Completion", width: 80, max_width: 80, min_width: 80, align: "center" },
                { name: "status", label: "Status", width: 130, max_width: 130, min_width: 130, align: "center" }
            ];

            gantt.config.layout = {
                css: "gantt_container",
                cols: [
                    {
                        width: 625,
                        min_width: 425,
                        rows: [
                            { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
                            { view: "scrollbar", id: "gridScroll", group: "horizontal" }
                        ]
                    },
                    { resizer: true, width: 1 },
                    {
                        rows: [
                            { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
                            { view: "scrollbar", id: "scrollHor", group: "horizontal" }
                        ]
                    },
                    { view: "scrollbar", id: "scrollVer" }
                ]
            };
            gantt.sort("id", false);
            gantt.config.sort = true;
            gantt.config.smart_rendering = true;
            gantt.config.drag_progress = false;
            gantt.config.drag_resize = false;
            gantt.config.show_progress = true;
            gantt.config.date_format = "%Y-%m-%d %H:%i:%s";
            gantt.config.task_date = "%d-%m-%Y %H:%i:%s";
            gantt.config.show_tasks_outside_timescale = true;
            gantt.config.autofit = true;
            gantt.config.grid_width = 500;
            gantt.init('editor');

            gantt.parse(taskData);
        });
    }
}