/*
 * Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

import { Component, OnInit, ViewContainerRef } from '@angular/core';
import { MdListDemoComponent } from '../md-list-demo/md-list-demo.component';
import { AlertService, AlertType, PrimaryButton,BciAlertDialogIntl, WidthUnit } from '@bci-web-core/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { User } from '../../../shared/user';
import { skip, takeUntil } from 'rxjs/operators';
import { UserService } from '../../../shared/user-service.service';

@Component({
  selector: 'bci-md-tiles-demo',
  templateUrl: './md-tiles-demo.component.html',
  styleUrls: ['./md-tiles-demo.component.scss'],
  providers: [ BciAlertDialogIntl ],
})
export class MdTilesDemoComponent extends MdListDemoComponent implements OnInit{
  modalResponse: string;
  showLoading = true;
  cardHoverPressedStyling = true;
  detailViewSizeUnit = WidthUnit.percentage;
  detailViewCloseIcon = true;
  public _lastQuery: Params | undefined;

  constructor(
    public userService: UserService,
    public alertService: AlertService,
    route: ActivatedRoute,
    router: Router,
    private viewContainerReference: ViewContainerRef
  ) {
    super(userService, alertService, route, router, viewContainerReference);
    route.queryParamMap.pipe(skip(1)).subscribe(() => (this.showLoading = true));
  }
  ngOnInit(): void {
    this.userService.items
      .pipe(takeUntil(this.componentDestroyed$), skip(1))
      .subscribe(() => (this.showLoading = false));
    super.ngOnInit();
  }

  addUser() {
    const newUser = Math.floor(Math.random() * 1000 + this.userService.sampleData.length);
    const id = newUser.toString();
    this.userService.sampleData.push(
      new User(id, 'User ' + id, 'User', 'IT', 'user' + id + '@company.com', new Date())
    );
    this.userService.queryAll(this._lastQuery);
  }

  deleteUser(user: { name: string; id: string }) {
    this.modalResponse = null;
    const ref = this.alertService.openAlertBox({
      type: AlertType[Symbol.hasInstance],
      title: `Delete ${user.name}?`,
      description: 'This action will delete this User.',
      leftButtonTitle: 'Delete',
      rightButtonTitle: 'Cancel',
      primaryButton: PrimaryButton.RightButton,
    }, this.viewContainerReference);
    ref.afterClosed().subscribe((res) => {
      this.modalResponse = res;
      if (res === 'left') {
        const index = this.userService.sampleData.findIndex((value) => value.id === user.id);
        this.userService.sampleData = this.userService.sampleData.filter(
          (value) => this.userService.sampleData.indexOf(value) !== index
        );
        this.userService.queryAll(this._lastQuery);
      }
    });
  }

  setFocusState(userid:string) {
    this.userService.sampleData.map(x => userid == x.id ? x.selected = true : x.selected = false);
  }

  toggleCloseIcon() {
    this.userService.toggleCloseIcon(this.detailViewCloseIcon);
  }
}
