import {
  Directive,
  ViewContainerRef,
  TemplateRef,
  ContentChildren,
  QueryList,
  Attribute,
  AfterContentInit,
  Input
} from 'angular2/core';
import {isPresent, NumberWrapper} from 'angular2/src/facade/lang';
import {Map} from 'angular2/src/facade/collection';
import {SwitchView} from './ng_switch';

const _CATEGORY_DEFAULT = 'other';

export abstract class NgLocalization { abstract getPluralCategory(value: any): string; }

/**
 * `ngPlural` is an i18n directive that displays DOM sub-trees that match the switch expression
 * value, or failing that, DOM sub-trees that match the switch expression's pluralization category.
 *
 * To use this directive, you must provide an extension of `NgLocalization` that maps values to
 * category names. You then define a container element that sets the `[ngPlural]` attribute to a
 * switch expression.
 *    - Inner elements defined with an `[ngPluralCase]` attribute will display based on their
 * expression.
 *    - If `[ngPluralCase]` is set to a value starting with `=`, it will only display if the value
 * matches the switch expression exactly.
 *    - Otherwise, the view will be treated as a "category match", and will only display if exact
 * value matches aren't found and the value maps to its category using the `getPluralCategory`
 * function provided.
 *
 * If no matching views are found for a switch expression, inner elements marked
 * `[ngPluralCase]="other"` will be displayed.
 *
 * ```typescript
 * class MyLocalization extends NgLocalization {
 *    getPluralCategory(value: any) {
 *       if(value < 5) {
 *          return 'few';
 *       }
 *    }
 * }
 *
 * @Component({
 *    selector: 'app',
 *    providers: [provide(NgLocalization, {useClass: MyLocalization})]
 * })
 * @View({
 *   template: `
 *     <p>Value = {{value}}</p>
 *     <button (click)="inc()">Increment</button>
 *
 *     <div [ngPlural]="value">
 *       <template ngPluralCase="=0">there is nothing</template>
 *       <template ngPluralCase="=1">there is one</template>
 *       <template ngPluralCase="few">there are a few</template>
 *       <template ngPluralCase="other">there is some number</template>
 *     </div>
 *   `,
 *   directives: [NgPlural, NgPluralCase]
 * })
 * export class App {
 *   value = 'init';
 *
 *   inc() {
 *     this.value = this.value === 'init' ? 0 : this.value + 1;
 *   }
 * }
 *
 * ```
 */

@Directive({selector: '[ngPluralCase]'})
export class NgPluralCase {
  /** @internal */
  _view: SwitchView;
  constructor(@Attribute('ngPluralCase') public value: string, template: TemplateRef,
              viewContainer: ViewContainerRef) {
    this._view = new SwitchView(viewContainer, template);
  }
}


@Directive({selector: '[ngPlural]'})
export class NgPlural implements AfterContentInit {
  private _switchValue: number;
  private _activeView: SwitchView;
  private _caseViews = new Map<any, SwitchView>();
  @ContentChildren(NgPluralCase) cases: QueryList<NgPluralCase> = null;

  constructor(private _localization: NgLocalization) {}

  @Input()
  set ngPlural(value: number) {
    this._switchValue = value;
    this._updateView();
  }

  ngAfterContentInit() {
    this.cases.forEach((pluralCase: NgPluralCase): void => {
      this._caseViews.set(this._formatValue(pluralCase), pluralCase._view);
    });
    this._updateView();
  }

  /** @internal */
  _updateView(): void {
    this._clearViews();

    var view: SwitchView = this._caseViews.get(this._switchValue);
    if (!isPresent(view)) view = this._getCategoryView(this._switchValue);

    this._activateView(view);
  }

  /** @internal */
  _clearViews() {
    if (isPresent(this._activeView)) this._activeView.destroy();
  }

  /** @internal */
  _activateView(view: SwitchView) {
    if (!isPresent(view)) return;
    this._activeView = view;
    this._activeView.create();
  }

  /** @internal */
  _getCategoryView(value: number): SwitchView {
    var category: string = this._localization.getPluralCategory(value);
    var categoryView: SwitchView = this._caseViews.get(category);
    return isPresent(categoryView) ? categoryView : this._caseViews.get(_CATEGORY_DEFAULT);
  }

  /** @internal */
  _isValueView(pluralCase: NgPluralCase): boolean { return pluralCase.value[0] === "="; }

  /** @internal */
  _formatValue(pluralCase: NgPluralCase): any {
    return this._isValueView(pluralCase) ? this._stripValue(pluralCase.value) : pluralCase.value;
  }

  /** @internal */
  _stripValue(value: string): number { return NumberWrapper.parseInt(value.substring(1), 10); }
}