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


@Component({
  selector: 'dockerfilePathSelect',
  template: `
    <div class="dockerfile-path-select-element">
      <div class="dropdown-select" placeholder="'Enter path containing a Dockerfile'"
           selected-item="$ctrl.selectedPath"
           lookahead-items="$ctrl.paths"
           handle-input="$ctrl.setPath(input)"
           handle-item-selected="$ctrl.setSelectedPath(datum.value)"
           allow-custom-input="true"
           hide-dropdown="!$ctrl.supportsFullListing">
        <!-- Icons -->
        <i class="dropdown-select-icon none-icon fa fa-folder-o fa-lg" 
           ng-show="$ctrl.isUnknownPath"></i>
        <i class="dropdown-select-icon none-icon fa fa-folder fa-lg" style="color: black;" 
           ng-show="!$ctrl.isUnknownPath"></i>
        <i class="dropdown-select-icon fa fa-folder fa-lg"></i>
    
        <!-- Dropdown menu -->
        <ul class="dropdown-select-menu pull-right" role="menu">
          <li ng-repeat="path in $ctrl.paths">
            <a ng-click="$ctrl.setSelectedPath(path)" 
               ng-if="path">
              <i class="fa fa-folder fa-lg"></i> {{ path }}
            </a>
          </li>
          <li class="dropdown-header" role="presentation" 
              ng-show="!$ctrl.paths.length">
            No Dockerfiles found in repository
          </li>
        </ul>
      </div>
    
      <div style="padding: 10px">
        <div class="co-alert co-alert-danger" 
             ng-show="!$ctrl.isValidPath && $ctrl.currentPath">
          Path entered for folder containing Dockerfile is invalid: Must start with a '/'.
        </div>
      </div>
    </div>
  `,
})
export class DockerfilePathSelectComponent implements ng.IComponentController {

  // FIXME: Use one-way data binding
  @Input('=') public currentPath: string;
  @Input('=') public isValidPath: boolean;
  @Input('=') public paths: string[];
  @Input('=') public supportsFullListing: boolean;
  private isUnknownPath: boolean = true;
  private selectedPath: string | null = null;

  public $onChanges(changes: ng.IOnChangesObject): void {
    this.isValidPath = this.checkPath(this.currentPath, this.paths, this.supportsFullListing);
  }

  public setPath(path: string): void {
    this.currentPath = path;
    this.selectedPath = null;
    this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
  }

  public setSelectedPath(path: string): void {
    this.currentPath = path;
    this.selectedPath = path;
    this.isValidPath = this.checkPath(path, this.paths, this.supportsFullListing);
  }

  private checkPath(path: string = '', paths: string[] = [], supportsFullListing: boolean): boolean {
    this.isUnknownPath = false;
    var isValidPath: boolean = false;

    if (path.length > 0 && path[0] === '/') {
      isValidPath = true;
      this.isUnknownPath = supportsFullListing && paths.indexOf(path) < 0;
    }
    return isValidPath;
  }
}