import {
  Component,
  OnInit,
  OnDestroy,
  ViewEncapsulation,
  AfterViewInit,
  ViewChild,
  ElementRef
} from '@angular/core';
import { MatTabChangeEvent } from '@angular/material';
import { fuseAnimations } from 'src/@fuse/animations';

import { Subject } from 'rxjs';
import { FormGroup, FormBuilder } from '@angular/forms';

@Component({
  selector: 'app-check-notice',
  templateUrl: './check-notice.component.html',
  styleUrls: ['./check-notice.component.scss'],
  encapsulation: ViewEncapsulation.None,
  animations: fuseAnimations
})
export class CheckNoticeComponent implements OnInit, OnDestroy, AfterViewInit {
  noticeCheckForm: FormGroup;
  idx: number;

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

  // Private
  private unSubScribeAll: Subject<any>;

  constructor(private fb: FormBuilder) {
    // Set the private defaults
    this.unSubScribeAll = new Subject();
  }

  ngOnInit() {
    this.noticeCheckForm = this.fb.group({
      description: ''
    });
  }

  /**
   * On destroy
   */
  ngOnDestroy(): void {
    // Unsubscribe from all subscriptions
    this.unSubScribeAll.next();
    this.unSubScribeAll.complete();
  }

  ngAfterViewInit(): void {
    console.log(this.tabGroup.selectedIndex);
  }
  /**
   * Save product
   */
  saveCheckNotice(): void {
    const data = this.noticeCheckForm.getRawValue();
    // console.log(this.selectedIndex);
    console.log(data);
    console.log(this.idx);
  }

  tabChanged(tabChangeEvent: MatTabChangeEvent): void {
    console.log('tabChangeEvent => ', tabChangeEvent);
    console.log('index => ', tabChangeEvent.index);
    this.idx = tabChangeEvent.index;
  }
}
