import {
  AfterViewInit,
  ChangeDetectionStrategy,
  ChangeDetectorRef,
  Component,
  OnDestroy,
  OnInit,
  ViewChild,
  ViewEncapsulation,
} from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { fuseAnimations } from '@fuse/animations';
import { Subject } from 'rxjs';

@Component({
  selector: 'partner-sign-in-history',
  templateUrl: './partner-sign-in-history.component.html',
  styles: [
    /* language=SCSS */
    `
      .partner-sign-in-history-grid {
        grid-template-columns: 60px auto 40px;

        @screen sm {
          grid-template-columns: 100px auto 60px 60px;
        }

        @screen md {
          grid-template-columns: 100px 100px auto 60px 60px;
        }

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

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

  partnerSignInHistoryTableColumns: string[] = [
    'no',
    'signInIp',
    'signInAt',
    'note',
  ];

  partnerSignInHistoryDataSource: MatTableDataSource<TempPartnerSignIn> =
    new MatTableDataSource();

  /**
   * Constructor
   */
  constructor(private _changeDetectorRef: ChangeDetectorRef) {
    this.partnerSignInHistoryDataSource.data = PARTNER_HISTORY_DATA;
  }

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

  /**
   * On init
   */
  ngOnInit(): void {}

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

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

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

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

  /**
   * 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;
  }
}

export interface TempPartnerSignIn {
  signInIp: string;
  signInAt: string;
  note: string;
}

const PARTNER_HISTORY_DATA: TempPartnerSignIn[] = [
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
  { signInIp: '27.109.115.156', signInAt: '2022-08-20 15:15', note: '' },
];