'use strict';
import ViewportManager from '../../src/manager/viewport-manager';
import {LayoutType, LayoutDensityType} from '../../src/public-api/interfaces';
import { Logger } from '../../src/utils/toolbox/src';

describe('Viewport manager basic testing', () => {
    // visualUtils.set({
    //     dispatchEvent: ()=>{}
    // })
    let manager,
    logger = new Logger(()=>{});
    test('TC_FG_108 | Viewport manager is configured with defaults and no external viewports are created', (done)=>{
        manager = new ViewportManager({
            externalViewports: [],
            extLayout: {},
            logger,
            stores: {}
        });
        expect(manager.config.defaultViewports!.length).toBe(5);
        expect(manager.config.externalViewports!.length).toBe(0);
        done();
    });
    test('TC_FG_114 | Viewport manager is configured with a custom viewport', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'mobile-portrait',
                minscreenwidth: 0,
                maxscreenwidth: 400,
                config:{
                    columns: [],
                    layout: {
                        type: LayoutType.Card,
                        cardtemplate: function(){
                            return `<div></div>`    
                        }
                    }
                },
            },
            {
                name: 'mobile-landscape',
                maxscreenwidth: 600,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row,
                        density: LayoutDensityType.Compact
                    }
                }
            }],
            extLayout: {},
            stores: {},
            logger
        });
        let customViewports = manager.config.sanitizedCustomViewports!,
        viewport = customViewports[0];
        expect(customViewports.length).toBe(2);
        expect(viewport.name).toBe('mobile-portrait');
        expect(viewport.minscreenwidth).toBe(0);
        expect(viewport.maxscreenwidth).toBe(400);
        expect(viewport.config!.layout!.type).toBe('card');
        done();
    });
    test('TC_FG_112 | Viewport manager modifies a default', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'mobile',
                minscreenwidth: 350,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row,
                        density: LayoutDensityType.Default
                    }
                }
            }],
            extLayout: {},
            logger,
            stores: {}
        });
        let mobileViewport = manager.config.sanitizedModifiedViewports![0];
        expect(mobileViewport.name).toBe('mobile');
        expect(mobileViewport.minscreenwidth).toBe(350);
        expect(mobileViewport.config!.layout!.type).toBe('row');
        expect(mobileViewport.config!.layout!.density).toBe('default');
        done();
    });
    test('TC_FG_113 | Viewport manager holds default values after modifying a default', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'mobile',
                minscreenwidth: 350,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row,
                        density: LayoutDensityType.Default
                    }
                }
            }],
            extLayout: {},
            logger,
            stores: {}
        });
        let mobileViewport = manager.config.sanitizedModifiedViewports![0];
        expect(mobileViewport.name).toBe('mobile');
        expect(mobileViewport.maxscreenwidth).toBe(550);
        done();
    });
    test('TC_FG_116 | Viewport manager retains default values if not configured extenally', (done)=>{
        manager = new ViewportManager({
            externalViewports: [],
            extLayout: {},
            logger,
            stores: {}
        });
        let viewport = manager.config.defaultViewports![0];
        expect(viewport.name).toBe('mobile');
        expect(viewport.minscreenwidth).toBe(0);
        expect(viewport.maxscreenwidth).toBe(550);
        expect(viewport.config!.layout!.type).toBe('card');
        done();
    });
    test('TC_FG_118 | Viewport manager rejects custom viewport if min or max width is not provided', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'custom-viewport',
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            extLayout: {},
            logger,
            stores: {}
        });
        let extrnalViewports = manager.config.sanitizedCustomViewports!;
        expect(extrnalViewports.length).toBe(0);
        done();
    });
    test('TC_FG_119 | If more than one viewports are provide with same name then the later is considered', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'custom-viewport',
                minscreenwidth: 300,
                maxscreenwidth: 500,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            },
            {
                name: 'custom-viewport',
                minscreenwidth: 500,
                maxscreenwidth: 600,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Card
                    }
                }
            }],
            extLayout: {},
            stores: {},
            logger
        });
        let exetrnalViewports = manager.config.sanitizedCustomViewports!,
        viewport = exetrnalViewports[0];
        expect(exetrnalViewports.length).toBe(1);
        expect(viewport.minscreenwidth).toBe(500);
        expect(viewport.maxscreenwidth).toBe(600);
        expect(viewport.config!.layout!.type).toBe('card');
        done();
    });
    test('TC_FG_123 | Viewport manager ignores custom viewport if min width is greater than max width', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'custom-viewport',
                minscreenwidth: 500,
                maxscreenwidth: 400,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            extLayout: {},
            stores: {},
            logger
        });
        let externalViewports = manager.config.sanitizedCustomViewports!;
        expect(externalViewports.length).toBe(0);
        done();
    });
    test('TC_FG_124 | If a custom viewport is defined with only maxwidth then its immediate next viewport should adjust accordingly', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'mobile',
                maxscreenwidth: 600,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            extLayout: {},
            stores: {},
            logger
        });
        let sanitizedModifiedViewports = manager.config.sanitizedModifiedViewports!,
        tablePortraitLayout = sanitizedModifiedViewports[1];
        expect(tablePortraitLayout.minscreenwidth).toBe(601);
        done();
    });
    test('TC_FG_125 | Check that for a modified viewport, if only max width is provided then the other viewports are adjusted accordingly', (done)=>{
        manager = new ViewportManager({
            externalViewports: [{
                name: 'tablet-portrait',
                maxscreenwidth: 900,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            stores: {},
            extLayout: {},
            logger
        });
        let sanitizedModifiedViewports = manager.config.sanitizedModifiedViewports!,
        tableLandscapeLayout = sanitizedModifiedViewports[1];
        expect(tableLandscapeLayout.name).toBe('tablet-landscape');
        expect(tableLandscapeLayout.minscreenwidth).toBe(901);
        done();
    });
});
describe('Viewport manager screen detetection testing', () => {
    // visualUtils.set({
    //     dispatchEvent: ()=>{}
    // })
    let manager,
        logger = new Logger(()=>{});;
    test('TC_FG_109 | Default layout in desktop should be row', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [],
            extLayout: {},
            logger,
            stores:{}
        });
        manager._calculateViewport(1300);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('desktop');
        expect(derivedViewport.config!.layout!.type).toBe('row');
        done();
    });
    test('TC_FG_109 | Default layout in tablet-landscape should be row', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [],
            extLayout: {},
            logger,
            stores:{}
        });
        manager._calculateViewport(1100);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('tablet-landscape');
        expect(derivedViewport.config!.layout!.type).toBe('row');
        done();
    });
    test('TC_FG_110 | Default layout in tablet-portrait should be card', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [],
            extLayout: {},
            logger,
            stores :{}
        });
        manager._calculateViewport(1000);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('tablet-portrait');
        expect(derivedViewport.config!.layout!.type).toBe('card');
        done();
    });
    test('TC_FG_110 | Default layout in mobile should be card', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [{
                name: 'tablet-landscape',
                minscreenwidth: 1024,
                maxscreenwidth: 1100,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            },
            {
                name: 'desktop',
                minscreenwidth: 1200,
                maxscreenwidth: 1399,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            extLayout: {},
            stores :{},
            logger
        });
        manager._calculateViewport(1110);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('tablet-landscape');
        expect(derivedViewport.config!.layout!.type).toBe('row');
        done();
    });
    test('TC_FG_120 | Check that viewport detection falls back to default values for discontinuous range', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [{
                name: 'tablet-landscape',
                minscreenwidth: 1024,
                maxscreenwidth: 1100,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            },
            {
                name: 'desktop',
                minscreenwidth: 1200,
                maxscreenwidth: 1399,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            stores :{},
            extLayout: {},
            logger
        });
        manager._calculateViewport(1110);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('tablet-landscape');
        expect(derivedViewport.config!.layout!.type).toBe('row');
        done();
    });
    test('Check that default viewports are adjusted for providing unbounded range', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [{
                name: 'tablet-landscape',
                minscreenwidth: 1024,
                maxscreenwidth: 1100,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            stores :{},
            extLayout: {},
            logger
        });
        manager._calculateViewport(1110);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('desktop');
        expect(derivedViewport.config!.layout!.type).toBe('row');
        done();
    });
    test('TC_FG_121 | Check if min width of one viewport and max width of another viewport is same then min width is given more priority', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [{
                name: 'custom-viewport-1',
                minscreenwidth: 500,
                maxscreenwidth: 600,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            },
            {
                name: 'custom-viewport-2',
                minscreenwidth: 600,
                maxscreenwidth: 700,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            stores :{},
            extLayout: {},
            logger
        });
        manager._calculateViewport(600);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('custom-viewport-2');
        done();
    });
    test('TC_FG_122 | Check if min and max width defined for a custom range is same as that of a default, then custom gets the priority', (done)=>{
        let derivedViewport;
        manager = new ViewportManager({
            externalViewports: [{
                name: 'custom-viewport',
                minscreenwidth: 0,
                maxscreenwidth: 500,
                config: {
                    columns: [],
                    layout: {
                        type: LayoutType.Row
                    }
                }
            }],
            stores :{},
            extLayout: {},
            logger
        });
        manager._calculateViewport(400);
        derivedViewport = manager.getCurrentViewport();
        expect(derivedViewport.name).toBe('custom-viewport');
        done();
    });
});
// @todo: uncomment this block after the interface issue of the config object is corrected
// describe('Viewport manager viewport specific configuration testing', () => {
//     visualUtils.set({
//         dispatchEvent: ()=>{}
//     })
//     let manager,
//     currentViewport;
//     test('Viewport manager should return viewport specific configurations', (done)=>{
//         manager = new ViewportManager({
//             externalViewports: [
//                 {
//                     name: 'custom-viewport',
//                     minscreenwidth: 0,
//                     maxscreenwidth: 1900,
//                     config: {
//                         layout: {
//                             type: LayoutType.Row,
//                             density: LayoutDensityType.Default
//                         },
//                         rowoptions: {
//                             rowheight: 20
//                         },
//                         columns: [  
//                           {
//                             field: 'field-1'
//                           },
//                           {
//                             field: 'field-2'
//                           }
//                         ]
//                     }
//                 }
//             ],
//             extLayout: {},
//             logger
//         });
//         currentViewport = manager.getCurrentViewport();
//         expect(currentViewport.config!.rowoptions!.rowheight).toBe(20);
//         expect(currentViewport.config!.columns.length).toBe(2);
//         done();
//     });
// });