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

import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import {
  debounceTime,
  map,
  merge,
  Observable,
  Subject,
  switchMap,
  takeUntil,
} from 'rxjs';
import { fuseAnimations } from '@fuse/animations';
import { FuseConfirmationService } from '@fuse/services/confirmation';
import { DomainService } from '../services/domain.service';
import { MatSelectChange } from '@angular/material/select';
import { SiteService } from 'app/modules/polyglot/domain/services/site.service';
import { ActivatedRoute } from '@angular/router';
import { ListSitesResponse } from 'app/modules/protobuf/c2se/backend/site_pb';

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

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

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

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

  domainSettingTableColumns: string[] = [
    'idx',
    'domain',
    'designFolder',
    'siteName',
    'expiryDate',
    'periodOfUse',
    'memo',
    'deleteBtn',
  ];

  domainRegistrationTableColumns: string[] = [
    'domain',
    'designFolder',
    'siteName',
    'expiryDate',
    'memo',
    'updateBtn',
  ];

  domainSettingDataSource: MatTableDataSource<any> = new MatTableDataSource();
  domainRegistrationDataSource: MatTableDataSource<any> =
    new MatTableDataSource();

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

  /**
   * Constructor
   */
  constructor(
    private _activatedRoute: ActivatedRoute,
    private _changeDetectorRef: ChangeDetectorRef,
    private _fuseConfirmationService: FuseConfirmationService,
    private _formBuilder: FormBuilder,
    private __siteService: SiteService
  ) {}

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

  /**
   * On init
   */
  ngOnInit(): void {
    // Get the products
    /* this._domainService.domainSetting$
      .pipe(takeUntil(this._unsubscribeAll))
      .subscribe((domainSetting: any | undefined) => {
        this.domainSettingDataSource = domainSetting.domain;
        this.domainRegistrationDataSource = domainSetting.bota;
        // Mark for check
        this._changeDetectorRef.markForCheck();
      }); */

    this._activatedRoute.data.subscribe((data) => {
      let listSitesResult: ListSitesResponse.Result = data['listSites'];
      this.domainSettingDataSource.data = listSitesResult.getSitesList();

      console.log('dddd', listSitesResult.getSitesList());

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

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