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

import { Component } from '@angular/core';
import { first, filter } from 'rxjs/operators';

import { LoadingScreenService } from '@bci-web-core/core';

interface LoadingScreenStatusDemoModel {
  value: number;
  status: string;
}

@Component({
  selector: 'bci-loading-screen-demo',
  templateUrl: 'loading-screen-demo.html',
  styleUrls: ['loading-screen-demo.scss'],
})
export class LoadingScreenDemoComponent {
  private stopUpdateStatus = false;
  private updates: LoadingScreenStatusDemoModel[] = [
    { value: 0, status: 'Clear The Decks!' },
    { value: 15, status: 'Start At The Sink' },
    { value: 21, status: 'Spray Countertops and Stovetop' },
    { value: 39, status: 'Empty The Refrigerator' },
    { value: 47, status: 'Start At The Top' },
    { value: 53, status: 'Wipe Down Upper Cabinets & Clean Microwave' },
    { value: 69, status: 'Wipe Down Countertops and Stovetop' },
    { value: 88, status: 'Clean Vertical Surfaces of Appliances' },
    { value: 100, status: 'Done' },
  ];

  constructor(private loadingScreenService: LoadingScreenService) {}

  showLoadingScreenDeterminateInitialValue() {
    this.loadingScreenService.show({
      indeterminate: false,
      closeable: true,
      initialValue: 45,
    });
  }

  showLoadingScreenDeterminateCloseableDefault() {
    this.loadingScreenService.opened
      .pipe(
        filter((isOpened) => !!isOpened),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = false;
        this.updateStatus();
      });
    this.loadingScreenService.closed
      .pipe(
        filter((isClosed) => !!isClosed),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = true;
      });
    this.loadingScreenService.value.pipe(filter((value) => value === 100)).subscribe(() => {
      setTimeout(() => {
        this.loadingScreenService.close();
      }, 1000);
    });
    this.loadingScreenService.show({
      indeterminate: false,
      closeable: true,
    });
  }

  showLoadingScreenDeterminateCloseableCustom() {
    this.loadingScreenService.opened
      .pipe(
        filter((isOpened) => !!isOpened),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = false;
        this.updateStatus(0, this.updates);
      });
    this.loadingScreenService.closed
      .pipe(
        filter((isClosed) => !!isClosed),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = true;
      });
    this.loadingScreenService.value.pipe(filter((value) => value === 100)).subscribe(() => {
      setTimeout(() => {
        this.loadingScreenService.close();
      }, 1000);
    });
    this.loadingScreenService.show({
      title: 'My Step-By-Step To A Clean Kitchen',
      indeterminate: false,
      closeable: true,
    });
  }

  showLoadingScreenDeterminateNotCloseableDefault() {
    this.loadingScreenService.opened
      .pipe(
        filter((isOpened) => !!isOpened),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = false;
        this.updateStatus();
      });
    this.loadingScreenService.closed
      .pipe(
        filter((isClosed) => !!isClosed),
        first()
      )
      .subscribe(() => {
        this.stopUpdateStatus = true;
      });
    this.loadingScreenService.value.pipe(filter((value) => value === 100)).subscribe(() => {
      setTimeout(() => {
        this.loadingScreenService.close();
      }, 1000);
    });
    this.loadingScreenService.show({
      indeterminate: false,
      closeable: false,
    });
  }

  showLoadingScreenIndeterminateCloseable() {
    this.loadingScreenService.show({
      closeable: true,
    });
  }

  showLoadingScreenIndeterminateNotCloseable() {
    this.loadingScreenService.opened
      .pipe(
        filter((isOpened) => !!isOpened),
        first()
      )
      .subscribe(() => {
        setTimeout(() => {
          this.loadingScreenService.close();
        }, 3000);
      });
    this.loadingScreenService.show();
  }

  private updateStatus(value?: number, updates?: LoadingScreenStatusDemoModel[]) {
    value = value || 0;
    setTimeout(() => {
      if (value > 100 || this.stopUpdateStatus) {
        return;
      }

      let status: string;
      if (updates) {
        const update = updates.find((u) => u.value === value);
        status = update ? update.status : undefined;
      }

      this.loadingScreenService.progress(value, status);
      this.updateStatus(++value, updates);
    }, 50);
  }
}
