import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { WptDialog } from '@arrow/warpaint/dialog';
import { Utils } from '../utils.service';

// Components
import { AlertComponent } from './alert/alert.component';
import { ConfirmComponent } from './confirm/confirm.component';
import { PromptComponent } from './prompt/prompt.component';

export class DialogConfig {
  style?: string;
  width?: number;
  buttons?: { confirm: string; cancel?: string };
  restoreFocus?: boolean = true; //automatically restore focus after dialog close or not
}

@Injectable()
export class DialogService {
  constructor(private dialog: WptDialog, private utils: Utils) {}

  public alert(..._arguments: any[]): Observable<any> {
    let config: DialogConfig;
    const [title, ...messages] = _arguments;
    const configIndex = messages.length - 1;
    const alertDefaults = {
      style: 'info',
      width: 350,
      buttons: { confirm: 'OK' }
    };
    if (typeof messages[configIndex] !== 'string') config = messages.pop();
    config = Object.assign(alertDefaults, config);

    const dialogRef = this.dialog.open(AlertComponent, {
      width: `${config.width}px`,
      data: { title, messages, style: config.style, buttons: config.buttons },
      restoreFocus : config.restoreFocus
    });

    return dialogRef.beforeClosed();
  }

  public confirm(
    title: string,
    message: string,
    config?: DialogConfig
  ): Observable<any> {
    const confirmDefaults = {
      style: 'info',
      width: 450,
      buttons: { confirm: this.utils.translateByKeyWithFallback('yes', 'Yes'), cancel: this.utils.translateByKeyWithFallback('no', 'No') }
    };
    config = Object.assign(confirmDefaults, config);

    const dialogRef = this.dialog.open(ConfirmComponent, {
      width: `${config.width}px`,
      data: { title, message, style: config.style, buttons: config.buttons },
      restoreFocus : config.restoreFocus ? config.restoreFocus : true
    });

    return dialogRef.beforeClosed();
  }

  public prompt(
    title: string,
    message: string,
    value?: string,
    placeholder?: string,
    ariaLabel?: string,
    config?: DialogConfig,
    customComponent?: any
  ): Observable<any> {
    const promptDefaults = {
      style: 'info',
      width: 350,
      buttons: { confirm: 'SUBMIT', cancel: 'CANCEL' }
    };
    config = Object.assign(promptDefaults, config);
    customComponent = customComponent ? customComponent : PromptComponent;
    const dialogRef = this.dialog.open(customComponent, {
      width: `${config.width}px`,
      data: {
        title,
        message,
        value,
        placeholder,
        ariaLabel,
        style: config.style,
        buttons: config.buttons
      },
      restoreFocus : config.restoreFocus ? config.restoreFocus : true
    });

    return dialogRef.beforeClosed();
  }
}