import { Component, Input, OnInit } from '@angular/core';
import { SelectOption } from '@yourcause/common';
import { FeatureStatus } from '@yourcause/common/feature-flag';
import { I18nService } from '@yourcause/common/i18n';
import { YCModalComponent } from '@yourcause/common/modals';

@Component({
  selector: 'gc-update-feature-flag-status',
  templateUrl: './update-feature-flag-status.component.html',
  styleUrls: ['./update-feature-flag-status.component.scss']
})
export class UpdateFeatureFlagStatusComponent extends YCModalComponent<FeatureStatus> implements OnInit {
  @Input() currentStatus: FeatureStatus;
  @Input() featureName: string;

  FeatureStatus = FeatureStatus;

  radioOptions: (SelectOption<FeatureStatus>)[];

  tooltipText = '';

  constructor (
    private i18n: I18nService
  ) {
    super();
  }

  updatedStatus: FeatureStatus;

  setOptions () {
    this.radioOptions = [{
      value: FeatureStatus.OFF,
      display: `<strong>${this.i18n.translate(
        'common:lblDoNotEnable',
        {},
        'Do not enable'
      )}</strong><br>${this.i18n.translate(
        'common:lblDoNotEnableDescription',
        {},
        'No clients will have access to the feature'
      )}`
    }, {
      value: FeatureStatus.CANARY,
      display: `<strong>${this.i18n.translate(
        'ADMIN:lblEnableForTestClients',
        {},
        'Enable for test clients'
      )}</strong><br>${this.i18n.translate(
        'ADMIN:lblTestClientFlagDescription',
        {},
        'Clients with the "isTestClient" flag will have access to the feature'
      )}`
    }, {
      value: FeatureStatus.ON,
      display: `<strong>${this.i18n.translate(
        'ADMIN:lblEnableForAllClients',
        {},
        'Enable for all clients'
      )}</strong><br/>${this.i18n.translate(
        'ADMIN:lblAllClientFlagDescription',
        {},
        'All clients will have access to the feature'
      )}`
    }];
  }

  ngOnInit () {
    this.updatedStatus = this.currentStatus;
    this.setOptions();

    if (this.currentStatus !== FeatureStatus.OFF) {
      this.tooltipText = this.i18n.translate(
        'ADMIN:textDisableFeatureWillImpactClients',
        {},
        'Disabling this feature may impact client workflows, increase the volume of support tickets, and decrease client satisfaction'
      );
    }
  }

  handleSubmit () {
    this.closeModal.emit(this.updatedStatus);
  }

  handleCancel () {
    this.closeModal.emit();
  }
}