import { Subscription } from 'rxjs';

import { Component, ViewChild, OnDestroy, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { Store, select } from '@ngrx/store';

import { MatTabChangeEvent, MatTabGroup } from '@angular/material/tabs';
import { MatSidenav } from '@angular/material/sidenav';

import { LogService } from '@ucap/ng-logger';

import { AppSelector } from '@app/store/state';
import { AppChatService } from '@app/services/app-chat.service';

const NAVS = ['group', 'chat', 'organization', 'message'];

@Component({
  selector: 'app-layouts-default',
  templateUrl: './default.layout.component.html',
  styleUrls: ['./default.layout.component.scss']
})
export class DefaultLayoutComponent implements OnInit, OnDestroy {
  @ViewChild('navTabGroup', { static: true })
  navTabGroup: MatTabGroup;

  @ViewChild('leftSidenav', { static: true })
  leftSidenav: MatSidenav;

  showStatusbar = true;

  /** FAB */
  fabButtonShow = true;
  fabButtons: { icon: string; tooltip?: string; divisionType?: string }[];

  private windowSizeSubscription: Subscription;

  constructor(
    private router: Router,
    private store: Store<any>,
    private appChatService: AppChatService,
    private logService: LogService
  ) {}

  ngOnInit(): void {
    this.windowSizeSubscription = this.store
      .pipe(select(AppSelector.windowSize))
      .subscribe((size) => {
        if (size.width < 780) {
          if (this.leftSidenav.opened) {
            this.leftSidenav.close();
          }
        } else {
          if (!this.leftSidenav.opened) {
            this.leftSidenav.open();
          }
        }
      });

    this.setTabGroup(this.router.url);

    this.setFabInitial(NAVS[0]);
  }

  ngOnDestroy(): void {
    if (!this.windowSizeSubscription) {
      this.windowSizeSubscription.unsubscribe();
    }
  }

  onSelectedTabChange(event: MatTabChangeEvent) {
    if (4 === event.index) {
      this.router.navigate(
        ['group', { outlets: { content: 'chat/index' } }],
        {}
      );
      return;
    }
    this.router.navigate([
      NAVS[event.index],
      { outlets: { content: 'index' } }
    ]);
    this.setFabInitial(NAVS[event.index]);
  }

  onClickToggleLeftSidenav() {
    if (this.leftSidenav.opened) {
      this.leftSidenav.close();
    } else {
      this.leftSidenav.open();
    }
  }

  private setTabGroup(url: string) {
    if (!!this.navTabGroup) {
      this.navTabGroup.selectedIndex = NAVS.findIndex((v) =>
        url.startsWith(`/${v}`)
      );
    }
  }

  setFabInitial(type: string) {
    switch (type) {
      case 'group':
        {
          this.fabButtonShow = true;
          this.fabButtons = [
            {
              icon: 'add',
              tooltip: '그룹 추가',
              divisionType: 'GROUP_NEW_ADD'
            }
          ];
        }
        break;
      case 'chat':
        {
          this.fabButtonShow = true;
          this.fabButtons = [
            {
              icon: 'chat',
              tooltip: '대화 추가',
              divisionType: 'CAHT_NEW_ADD'
            }
          ];

          // if (environment.productConfig.CommonSetting.useTimerRoom) {
          //   this.fabButtons.push({
          //     icon: 'timer',
          //     tooltip: this.translateService.instant('chat.newTimerChat'),
          //     divisionType: 'CHAT_NEW_TIMER_ADD'
          //   });
          // }
        }
        break;
      case 'organization':
        {
          this.fabButtonShow = false;
        }
        break;
      case 'message':
        {
          this.fabButtonShow = true;
          this.fabButtons = [
            {
              icon: 'add',
              tooltip: '쪽지 추가',
              divisionType: 'MESSAGE_NEW'
            }
          ];
        }
        break;
      // case MainMenu.Call:
      //   {
      //     this.fabButtonShow = false;
      //   }
      //   break;

      default: {
        this.fabButtonShow = false;
      }
    }
  }

  onClickFab(params: { btn: any }) {
    const btn = params.btn as {
      icon: string;
      tooltip?: string;
      divisionType?: string;
    };

    switch (btn.divisionType) {
      case 'GROUP_NEW_ADD':
        {
          this.logService.debug('GROUP_NEW_ADD');
        }
        break;
      case 'CAHT_NEW_ADD':
        {
          this.appChatService.newOpenRoomDialog();
        }
        break;
      case 'CHAT_NEW_TIMER_ADD':
        {
          // if (environment.productConfig.CommonSetting.useTimerRoom) {
          //   this.onClickNewChat('TIMER');
          // }
        }
        break;

      case 'MESSAGE_NEW':
        {
          this.logService.debug('MESSAGE_NEW');
        }
        break;
    }
  }
}
