import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';

import { MatPaginator } from '@angular/material/paginator';

import { Observable, Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations';

import { NoticeOneline } from '../models/notice-oneline';
import { NoticeOnelinePagination } from '../models/notice-oneline-pagination';
import { NoticeOnelineService } from '../services/notice-oneline.service';
import { Router } from '@angular/router';

@Component({
  selector: 'notice-oneline-list',
  templateUrl: './list.component.html',
  styles: [
    /* language=SCSS */
    `
      .notice-oneline-grid {
        grid-template-columns: 40px 40px auto 200px 200px;

        @screen sm {
          grid-template-columns: 40px 40px auto 200px 200px;
        }

        @screen md {
          grid-template-columns: 40px 40px auto 300px 200px;
        }

        @screen lg {
          grid-template-columns: 40px 40px auto 300px 200px;
        }
      }
    `,
  ],
  encapsulation: ViewEncapsulation.None,
  changeDetection: ChangeDetectionStrategy.OnPush,
  animations: fuseAnimations,
})
export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(MatPaginator) private _paginator!: MatPaginator;

  noticeOnelines$!: Observable<NoticeOneline[] | undefined>;

  isLoading = false;
  searchInputControl = new FormControl();
  selectedNoticeOneline?: NoticeOneline;
  pagination?: NoticeOnelinePagination;

  __isSearchOpened = false;

  private _unsubscribeAll: Subject<any> = new Subject<any>();

  /**
   * Constructor
   */
  constructor(
    private _changeDetectorRef: ChangeDetectorRef,
    private _noticeOnelineService: NoticeOnelineService,
    private router: Router
  ) {}

  // -----------------------------------------------------------------------------------------------------
  // @ Lifecycle hooks
  // -----------------------------------------------------------------------------------------------------

  /**
   * On init
   */
  ngOnInit(): void {
    // Get the pagination
    this._noticeOnelineService.pagination$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe((pagination: NoticeOnelinePagination | undefined) => {
        // Update the pagination
        this.pagination = pagination;

        // Mark for check
        this._changeDetectorRef.markForCheck();
      });

    // Get the products
    this.noticeOnelines$ = this._noticeOnelineService.noticeOnelines$;
  }

  /**
   * After view init
   */
  ngAfterViewInit(): void {}

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

  // -----------------------------------------------------------------------------------------------------
  // @ Public methods
  // -----------------------------------------------------------------------------------------------------

  // -----------------------------------------------------------------------------------------------------
  // @ Private methods
  // -----------------------------------------------------------------------------------------------------

  /**
   * toggle the search
   * Used in 'bar'
   */
  __onClickTItle(noticeOneline: NoticeOneline): void {}
  __onClickSearch(): void {
    this.__isSearchOpened = !this.__isSearchOpened;
  }

  __onClickReditBtn(event: MouseEvent, id: string): void {
    const param = id === '0' ? '' : id;
    let url: string = 'board/notice-oneline/redit/' + param;
    this.router.navigateByUrl(url);
  }
  /**
   * Create product
   */
  __createProduct(): void {}

  /**
   * Toggle product details
   *
   * @param productId
   */
  __toggleDetails(productId: string): void {}

  /**
   * Track by function for ngFor loops
   *
   * @param index
   * @param item
   */
  __trackByFn(index: number, item: any): any {
    return item.id || index;
  }
}
