// import { Component, OnInit, OnDestroy } from '@angular/core';
// import { Router, ActivatedRoute } from '@angular/router';
import {of as observableOf,  Observable } from 'rxjs';
import { DebugElement } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { SharedService } from '../../shared/shared.service';
import { UserService } from '../../services/user.service';
import { CartService } from '../../services/cart.service';
import { CustomerService } from '../../services/customer.service';
import { CatalogService } from '../../services/catalog.service';
import { MoreDetailsComponent } from './more-details.component';
import { LookupService } from '../../services/lookup.service';
import { CatalogServiceStub } from '../../services/catalog.service.stub';
import * as Constants from '../../shared/constants';
import { TradeinService } from '../../services/tradein.service';
import { LoggingService } from '../../services/logging.service';
import { CheckoutService } from '../../services/checkout.service';
import { HttpClient, HttpHandler } from '@angular/common/http';
import { moreInfoResponse } from '../../shared/mock-data';
import { MoreDetailsService } from '../../shared/more-details-modal.service';
import { observableToBeFn } from 'rxjs/internal/testing/TestScheduler';

describe('More Details Component', () => {
    let moreDetailsObject: MoreDetailsComponent;
    let fixture: ComponentFixture<MoreDetailsComponent>;
    let catalogServiceStub: CatalogServiceStub;
    let debugElement: DebugElement;
    let el: HTMLElement;
    // let moreInfoResponse:any = moreInfoResponse
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            providers: [
                SharedService,
                CartService,
                UserService,
                CustomerService,
                CatalogService,
                CheckoutService,
                LookupService,
                TradeinService,
                LoggingService,
                HttpClient, 
                HttpHandler,
                MoreDetailsService
            ],
            imports: [
                FormsModule,
                RouterTestingModule
            ],
            declarations: [MoreDetailsComponent]
        });

        fixture = TestBed.createComponent(MoreDetailsComponent);
        moreDetailsObject = fixture.componentInstance;
        moreDetailsObject.storeId = Constants.STORE_ID_CD;

        moreDetailsObject['product'] = {
            'productType': 'GSM',
            'categoryName': 'Device',
            'categoryId': 2,
            'productId': 123456,
            'name': 'Stylo™ 3 PLUS',
            'description': '&bull;5.7 FHD IPS Display<br>&bull;Premium Stylus Pen<br>&bull;13MP Rear-Facing Camera<br>&bull;Fast Charging Capability<br>&bull;5MP Front-Facing Camera<br>&bull;Fingerprint Sensor<br>&bull;Video Recording and Playback',
            'items': [
                {
                    'isRefurbished': false,
                    'openBoxDiscount': 0,
                    'instantDiscount': 0,
                    'promotionDiscount': 0,
                    'shipDateTo': null,
                    'isByos': false,
                    'suggestedPrice': 225,
                    'name': 'Stylo™ 3 PLUS',
                    'thumbNail': '/images/png/products/phones/LG-Stylo-3-PLUS/110x110.png',
                    'fullImage': '/images/png/products/phones/LG-Stylo-3-PLUS/170x250.png',
                    'colorName': null,
                    'itemId': 150945,
                    'loan': null,
                    'lease': null,
                    'status': 'OOS',
                    'finalPrice': 225,
                    'shipDateFrom': null,
                    'colorImageUrl': null,
                    'mailInRebate': 0,
                    'description': null,
                    'deviceSKU': '610214652492',
                    'state': 'ADD'
                }
            ],
            'manufacturer': 'LG',
            'itemIndex': 0,
            'canCompare': true
        }
        catalogServiceStub = fixture.debugElement.injector.get(CatalogService);
        TestBed.compileComponents();
        TestBed.get(SharedService);
        TestBed.get(CartService);
        TestBed.get(UserService);

    }));

    // tests here
    it('should be created', () => {
        expect(moreDetailsObject).toBeTruthy();
    });
    it('all methods are defined', () => {
        expect(moreDetailsObject.show).toBeDefined();
        expect(moreDetailsObject.hide).toBeDefined();
        expect(moreDetailsObject.onContainerClicked).toBeDefined();
        expect(moreDetailsObject.loadMoreDetail).toBeDefined();
    });

    it('should hide the compare modal', () => {
        moreDetailsObject.visibleAnimate = true;
        moreDetailsObject.hide();
        expect(moreDetailsObject.visibleAnimate).toBeFalsy();
    });

    it('should show the compare modal', () => {
        moreDetailsObject.visibleAnimate = false;
        moreDetailsObject.show();
        expect(moreDetailsObject.visible).toBeTruthy();
    });

    it('should load more details', () => {
        const spy = spyOn(catalogServiceStub, 'getProductMoreInfo').and.returnValue(
            Observable.of(moreInfoResponse)
        );
        moreDetailsObject.loadMoreDetail();
        expect(moreDetailsObject.moreDetailsResponse).toEqual(moreInfoResponse);
    });
    it('Should open the modal if it is opened and viceverse', async(() => {
        debugElement = fixture.debugElement.query(By.css('.fade'));
        el = debugElement.nativeElement;
        moreDetailsObject.show();
        el.click();
        expect(moreDetailsObject.visible).toEqual(true);
    }));


});