import { Component, Injector, OnInit, ViewChild, ViewEncapsulation, Input, ViewContainerRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { appModuleAnimation } from '@shared/animations/routerTransition';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ControllerRouteDetailServiceProxy, ControllerOrderPackagesListServiceProxy, GetControllerOrderPackagesListInput, OrderTypesServiceProxy} from '@shared/service-proxies/service-proxies';
import { AppSessionService } from '@shared/common/session/app-session.service';
import { Table } from "primeng/table";
import { LazyLoadEvent } from "primeng/primeng";
import { Paginator } from 'primeng/components/paginator/paginator';
import { finalize } from 'rxjs/operators';
import * as _ from 'lodash';
import * as moment from 'moment';
import {Location} from '@angular/common';
declare var $: any;
declare var jquery:any;
@Component({
    selector:'order-packages-group-tab',
    templateUrl: 'order-packages-group.component.html',
    encapsulation: ViewEncapsulation.None,
    animations: [appModuleAnimation()],
    styleUrls: ['./order-packages-list.component.less'],
    providers: [ControllerOrderPackagesListServiceProxy]
})

export class ControllerOrderPackagesGroupComponent extends AppComponentBase implements OnInit {

    routeId:number = null;
    formattedOrderPackagesDateTime: any
    formattedOrderPackagesPickupBy: any
    formattedOrderPackagesDeliveryBy: any
    filterText: any
    filterOrderTag: any
    filterAccountNumber: any;
    filterCustomer: string;
    filterAddress: string;
    advancedFiltersAreShown=false
    stopsIds: GetControllerOrderPackagesListInput = new GetControllerOrderPackagesListInput();
    @ViewChild("dataTablePackages", {static: true}) dataTable:Table
    @ViewChild("paginatorPackages", {static: true}) paginator: Paginator
    @Input() filters: {
        locationFilter: number;
        statusFilter: number;
        typeFilter: number;
        startDate: Date;
        endDate: Date;
        orderStatusCode: string,
        orderKPIFilter: string,
        unassignedStopsFilter: boolean,
        willCallFilter: boolean,
        isLineHaul: boolean
    } = <any>{};
    @Input() edition: any
    filterData: any
    unassignedStopsFiltering: boolean;
    filterOrderId: number
    filterId: number
    ctr: number
    _ukLocale: boolean
    _isFbx: boolean;
    pickUpTime: any;
    deliveryTime: any;
    filteredOrderType: any;
    orderTypeId: any;

    constructor(
        injector: Injector,
        private id:ActivatedRoute,
        private _controllerRouteDetails: ControllerRouteDetailServiceProxy,
        private _controllerOrderPackages: ControllerOrderPackagesListServiceProxy,
        private _appSessionService :AppSessionService,
        private _location:Location,
        private _orderTypeRepository: OrderTypesServiceProxy,
        private viewContainerRef: ViewContainerRef,
    ) {
        super(injector);
        this.filterData = [];
    }

    ngOnInit(){
        this._ukLocale = abp.features.isEnabled('App.DateFormatFeature.UKLocale');
        this._isFbx = abp.features.isEnabled('App.FBXFeature');
        // this.id.paramMap.subscribe(params => {
        //     this.routeId = Number(params.get('id'));
        // });
        this.ctr = 1;
        let timeId = localStorage.getItem('timeZoneId');
        moment.tz.setDefault(timeId);
        $('#OrderTypeSelect4').select2();
        this.filteredOrderType = this.getParentComponent().filteredOrderType;
    }

    getOrderPackages(event?: LazyLoadEvent){
        let date = moment(this.filters.endDate)
        let timeId = localStorage.getItem('timeZoneId');

        if (this.primengTableHelper.shouldResetPaging(event)) {
            this.paginator.changePage(0);
            return;
        }
        this.orderTypeId = Number((<HTMLInputElement>document.getElementById('OrderTypeSelect4')).value) == 0 ? undefined :
                            Number((<HTMLInputElement>document.getElementById('OrderTypeSelect4')).value);
        this.spinnerService.show();
        this._controllerOrderPackages
            .getControllerOrderPackagesGroupList(
                this.filterText,
                this.filters.orderStatusCode,
                this.filterId,
                this.filterOrderId,
                undefined,  
                this.filters.locationFilter,
                undefined,
                undefined,
                this.filterOrderTag,
                this.filterAccountNumber,
                moment.tz(localStorage.getItem('loadDate'), timeId),
                moment.tz(localStorage.getItem('loadDate'), timeId).endOf('day'),
                this.filters.unassignedStopsFilter,
                this.filters.willCallFilter,
                localStorage.getItem('timeZone'),
                this.filterCustomer,
                this.filterAddress,
                undefined,
                this.orderTypeId,
                this.filters.isLineHaul,
                this.primengTableHelper.getSorting(this.dataTable),
                this.primengTableHelper.getMaxResultCount(this.paginator, event),
                this.primengTableHelper.getSkipCount(this.paginator, event))
                .pipe().subscribe(result => {
                    for (var key in result){
                        for(var data in result[key].groupOrders){
                            result[key].groupOrders[data].pickUpEtaStart = moment(result[key].groupOrders[data].pickUpEtaStart.utcOffset(moment.parseZone(result[key].groupOrders[data].pickUpEtaStart).utcOffset()).format('M/D/YYYY h:mm a'));
                            result[key].groupOrders[data].deliveryEtaEnd = moment(result[key].groupOrders[data].deliveryEtaEnd.utcOffset(moment.parseZone(result[key].groupOrders[data].deliveryEtaEnd).utcOffset()).format('M/D/YYYY h:mm a'));
                        }
                    }
                this.primengTableHelper.totalRecordsCount = result.totalCount;
                this.primengTableHelper.records = result.items;
                this.spinnerService.hide();
                this.filteredOrderType = this.getParentComponent().filteredOrderType;
            });
    }

    onShown(){
        
    }

    toggleMoreInfo(event) {
        var element = event.currentTarget.nextSibling;
        var selector = document.querySelectorAll('.more-info-container.active');
        var hover = document.querySelectorAll('.more-btn.hover');

        if (element.classList.contains('active')) {
            event.currentTarget.classList.remove('hover');
            element.classList.remove('active');
        } else {
            if (selector.length > 0) {
                selector[0].classList.remove('active');
                hover[0].classList.remove('hover');
            }
            element.classList.add('active');
            event.currentTarget.classList.add('hover');
        }

    }
    getParentComponent() {
        return this.viewContainerRef['_data'].componentView.component.viewContainerRef['_view'].component
    }

    expandDetails(obj: string) {
        console.log(obj)
        if ($('.tr-' + obj).css('display') == 'none') {
            // $('.span-' + obj).html(obj);
            $('.tr-' + obj).css('display', 'table-row');
            $('.td-' + obj).html('<i class="fa fa-chevron-down"></i>');
            console.log("a");
        }
        else {
            // $('.span-' + obj).html(obj);
            $('.tr-' + obj).css('display', 'none');
            $('.td-' + obj).html('<i class="fa fa-chevron-right"></i>');
            console.log("b");
        }
    }

}