import { Component, OnInit, Input } from '@angular/core';

import { Observable } from 'rxjs';

import { UserService } from '../user.service';
import { LanguageService } from '../language.service';
import { DialogService } from '../dialogues/dialog.service';
import { Site, Service, DeploymentState } from '../types/types.module';

@Component({
  selector: '[deployment-state-tr]',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {

  @Input() service: Service;

  buttonStates: string[] = ['deployed', 'questionnaire', 'failed', 'rejected'];
  public buttonActive = false;
  public buttonColor = '';
  public buttonText = '';
  public buttonTooltip = '';

  public state$: Observable<DeploymentState>;

  public stateDescription = '';


  constructor(
    public userService: UserService,
    public lang: LanguageService,
    public dialog: DialogService,
  ) { }

  ngOnInit() {
    this.state$ = this.userService.subscribeStateFor(this.service);
    this.state$.subscribe(
      (state: DeploymentState) => {
        switch (state.state) {
          case 'not_deployed':
            this.stateDescription = `The credentials are not deployed for the service ${ this.service.name }.`;
            this.buttonActive = false;
            break;
          case 'deployment_pending':
            this.stateDescription = `Waiting for the deployment of the credentials to the site ${ this.service.site.name }.`;
            this.buttonActive = false;
            break;
          case 'removal_pending':
            this.stateDescription = `Waiting for the removal of the credentials from the site ${ this.service.site.name }.`;
            this.buttonActive = false;
            break;

          case 'deployed':
            this.stateDescription = `The credentials are deployed for the service ${ this.service.name }. Click to see details.`;
            this.buttonActive = true;
            this.buttonColor = 'primary';
            this.buttonText = 'View credentials';
            this.buttonTooltip = this.buttonText;
            break;

          case 'questionnaire':
            this.stateDescription = `Site ${ this.service.site.name } needs more data to deploy the keys. Please click to submit the data.`;
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Submit Data';
            this.buttonTooltip = this.buttonText;
            break;
          case 'failed':
            this.stateDescription = `Site ${ this.service.site.name } failed to deploy the credentials.
              The deployment will be retried. Click for details.`;
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Submit Data';
            this.buttonTooltip = this.buttonText;
            break;
          case 'rejected':
            this.stateDescription = `Site ${ this.service.site.name } rejected the deployment of the credentials. Click for details.`;
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Submit Data';
            this.buttonTooltip = this.buttonText;
            break;

          default:
            this.stateDescription = 'Access to this service was never requested.';
            this.buttonActive = false;
        }
      }
    );
  }

  public buttonAction(state: DeploymentState): void {
    switch (state.state) {
      case 'deployed':
        return this.dialog.openCredentials(this.state$);
      case 'questionnaire':
        return this.dialog.openQuestionnaire(this.state$);
      case 'failed':
        return this.dialog.openMessage(state);
      case 'rejected':
        return this.dialog.openMessage(state);
    }
  }

  public contactSupport() {
    window.location.href = 'mailto:' + this.service.contact_email + '?subject=%5BFEUDAL%5D%20Help%20request%0A';
  }

}