import { Input, Component } from 'angular-ts-decorators';


/**
 * An element which displays the matches and non-matches for a regular expression against a set of
 * items.
 */
@Component({
  selector: 'regexMatchView',
  template: `
    <div class="regex-match-view-element">
      <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) == null">
        <i class="fa fa-exclamation-triangle"></i>Invalid Regular Expression!
      </div>
      <div ng-if="$ctrl.filterMatches($ctrl.regex, $ctrl.items, false) != null">
        <table class="match-table">
          <tr>
            <td>Matching:</td>
            <td>
              <ul class="matching match-list">
                <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, true)">
                  <i class="fa {{ item.icon }}"></i>{{ item.title }}
                </li>
              </ul>
            </td>
          </tr>
          <tr>
            <td>Not Matching:</td>
            <td>
              <ul class="not-matching match-list">
                <li ng-repeat="item in $ctrl.filterMatches($ctrl.regex, $ctrl.items, false)">
                  <i class="fa {{ item.icon }}"></i>{{ item.title }}
                </li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
    </div>
  `
})
export class RegexMatchViewComponent implements ng.IComponentController {

  // FIXME: Use one-way data binding
  @Input('=') private regex: string;
  @Input('=') private items: any[];

  constructor() {

  }

  public filterMatches(regexstr: string, items: ({value: string})[], shouldMatch: boolean): ({value: string})[] | null {
    regexstr = regexstr || '.+';

    try {
      var regex = new RegExp(regexstr);
    } catch (ex) {
      return null;
    }

    return items.filter(function(item) {
      var value: string = item.value;
      var m: RegExpMatchArray = value.match(regex);
      var matches: boolean = !!(m && m[0].length == value.length);
      return matches == shouldMatch;
    });
  }
}