import { Component, AfterViewInit, Input } from '@angular/core';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { User } from '../../Models/User';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html'
})
export class NavigationComponent implements AfterViewInit {
  @Input()
  logoShort: string;
  @Input()
  logoLong: string;
  @Input()
  logoImage: string;
  @Input()
  user: User;

  name: string;
  showHide: boolean;

  constructor() {
    this.showHide = true;
  }

  changeShowStatus() {
    this.showHide =  !this.showHide;
  }

  ngAfterViewInit() {
    $(function () {
      $('.preloader').fadeOut();
    });

    const set = function () {
      const width =
        window.innerWidth > 0 ? window.innerWidth : this.screen.width;
      const topOffset = 70;
      if (width < 1170) {
        $('body').addClass('mini-sidebar');
        $('.navbar-brand .logo-long').hide();
        $('.navbar-brand .logo-short').show();
        $('.scroll-sidebar, .slimScrollDiv')
          .css('overflow-x', 'visible')
          .parent()
          .css('overflow', 'visible');
        $('.sidebartoggler i').addClass('ti-menu');
      } else {
        $('body').removeClass('mini-sidebar');
        $('.navbar-brand .logo-long').show();
        $('.navbar-brand .logo-short').hide();
        $('.sidebartoggler i').removeClass('ti-menu');
      }

      const height =
        (window.innerHeight > 0 ? window.innerHeight : this.screen.height) - 1;

      if (height > topOffset) {
        $('.page-wrapper').css('min-height', height + 'px');
      }
    };
    //$(window).ready(set);
    $(set);
    $(window).on('resize', set);

    $(document).on('click', '.mega-dropdown', function (e) {
      e.stopPropagation();
    });

    $('.search-box a, .search-box .app-search .srh-btn').on(
      'click',
      function () {
        $('.app-search').toggle(200);
      }
    );

    (<any>$('[data-toggle="tooltip"]')).tooltip();

    (<any>$('.scroll-sidebar')).slimScroll({
      position: 'left',
      size: '5px',
      height: '100%',
      color: '#dcdcdc'
    });

    (<any>$('.right-sidebar')).slimScroll({
      height: '100%',
      position: 'right',
      size: '5px',
      color: '#dcdcdc'
    });

    (<any>$('.message-center')).slimScroll({
      position: 'right',
      size: '5px',
      color: '#dcdcdc'
    });

    $('body').trigger('resize');
  }
}