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 = `Your credentials are not deployed for ${ this.service.name }.`;
            this.buttonActive = false;
            break;
          case 'deployment_pending':
            this.stateDescription = `Waiting for the deployment of your credentials to ${ this.service.site.name }.`;
            this.buttonActive = false;
            break;
          case 'removal_pending':
            this.stateDescription = `Waiting for the removal of your credentials from ${ this.service.site.name }.`;
            this.buttonActive = false;
            break;

          case 'deployed':
            this.buttonActive = true;
            this.buttonColor = 'primary';
            this.buttonText = 'View Credentials';
            this.buttonTooltip = 'View detailed information about the deployed credentials';
            this.stateDescription = `
              The credentials are deployed for this service ${ this.service.name }.
              Click "${ this.buttonText }" see details on your deployed ssh keys and credentials.
            `;
            break;

          case 'questionnaire':
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Submit Data';
            this.buttonTooltip = 'Submit missing data';
            this.stateDescription = `
              More data is needed to deploy your credentials.
              Please click "${ this.buttonText }" to submit the missing data.
            `;
            break;
          case 'failed':
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Show Error';
            this.buttonTooltip = this.buttonText;
            this.stateDescription = `
              The deployment of your credentials failed, but will be tried again.
              Please click "${ this.buttonText }" for more details concerning this error.
            `;
            break;
          case 'rejected':
            this.buttonActive = true;
            this.buttonColor = 'warn';
            this.buttonText = 'Show message';
            this.buttonTooltip = this.buttonText;
            this.stateDescription = `
              The deployment of your credentials was rejected.
              Please click "${ this.buttonText }" to show more details.
            `;
            break;

          default:
            this.stateDescription = '';
            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';
  }

}