/*-
 * ============LICENSE_START=======================================================
 * SDC
 * ================================================================================
 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
 * ================================================================================
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
/// <reference path="../../../references"/>
module Sdc.Directives {
    'use strict';
    export interface IExpandCollapseScope extends ng.IScope {
        toggle(): void;
        collapsed: boolean;
        expandedSelector: string;
        content:string;
        isCloseOnInit:boolean;
        loadDataFunction: Function;
        isLoadingData: boolean;
    }

    export class ExpandCollapseDirective implements ng.IDirective {

        constructor(private $templateCache:ng.ITemplateCacheService) {
        }

        scope = {
            expandedSelector: '@',
            loadDataFunction: '&?',
            isCloseOnInit: '=?'
        };

        public replace = false;
        public restrict = 'AE';
        public transclude = true;

        template = ():string => {
            return this.$templateCache.get('/app/scripts/directives/utils/expand-collapse/expand-collapse.html');
        };

        link = (scope:IExpandCollapseScope, $elem:any) => {
            scope.collapsed = false;
            scope.isLoadingData = false;
            $elem.addClass('expanded');


            if(scope.isCloseOnInit) {
                  window.setTimeout(function () {
                    toggle();
                },0);
            }

            $elem.click(function(){
                toggle();
            });

            let expand = ():void => {
                $elem.addClass('expanded');
                scope.collapsed = false;

                let element = $(scope.expandedSelector)[0];
                let prevWidth = element.style.height;
                element.style.height = 'auto';
                let endWidth = getComputedStyle(element).height;
                element.style.height = prevWidth;
                element.offsetHeight; // force repaint
                element.style.transition = 'height .3s ease-in-out';
                element.style.height = endWidth;
                element.hidden = false;
                element.addEventListener('transitionend', function transitionEnd(event) {
                    if (event['propertyName'] == 'height') {
                        element.style.transition = '';
                        element.style.height = 'auto';
                        element.removeEventListener('transitionend', transitionEnd, false);
                    }
                }, false)
            };

            let collapse = ():void => {
                $elem.removeClass('expanded');
                scope.collapsed = true;

                let element = $(scope.expandedSelector)[0];
                 element.style.height = getComputedStyle(element).height;
                 element.style.transition = 'height .5s ease-in-out';
                 element.offsetHeight; // force repaint
                 element.style.height = '0px';
                element.hidden = true;
            };

            let toggle = ():void => {
                if (scope.collapsed === true){
                    if(scope.loadDataFunction) {
                        scope.isLoadingData = true;
                        let onSuccess = () => {
                            window.setTimeout(function () {
                                expand();
                                scope.isLoadingData = false;
                            },0);
                        };
                        scope.loadDataFunction().then(onSuccess);
                    }
                    else  {
                        if(scope.isLoadingData === false) {
                            expand();
                        }
                    }

                } else {
                    if(scope.isLoadingData === false) {
                        collapse();
                    }
                }
            }

        };

        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
            return new ExpandCollapseDirective($templateCache);
        };

    }

    ExpandCollapseDirective.factory.$inject = ['$templateCache'];
}