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


@Component({
  selector: 'manageTriggerCustomGit',
  template: `
    <div class="manage-trigger-custom-git-element manage-trigger-control">
      <div class="linear-workflow" 
           workflow-state="$ctrl.currentState" 
           done-title="Create Trigger"
           workflow-complete="$ctrl.activateTrigger({'config': $ctrl.config})">
        <!-- Section: Repository -->
        <div class="linear-workflow-section row"
             section-id="repo"
             section-title="Git Repository"
             section-valid="$ctrl.config.build_source">
    
          <div class="col-lg-7 col-md-7 col-sm-12 main-col">
            <h3>Enter repository</h3>
            <strong>
              Please enter the HTTP or SSH style URL used to clone your git repository:
            </strong>
            <input class="form-control" type="text" placeholder="git@example.com:namespace/repository.git"
                   ng-model="$ctrl.config.build_source" 
                   ng-pattern="$ctrl.gitUrlRegEx">
          </div>
          <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
            <p>Custom git triggers support any externally accessible git repository, via either the normal git protocol or HTTP.</p>
    
            <p><b>It is the responsibility of the git repository to invoke a webhook to tell <span class="registry-name" short="true"></span> that a commit has been added.</b></p>
          </div>
        </div><!-- /Section: Repository -->
    
        <!-- Section: Build context -->
        <div class="linear-workflow-section row"
             section-id="dockerfile"
             section-title="Build context"
             section-valid="$ctrl.config.subdir">
    
          <div class="col-lg-7 col-md-7 col-sm-12 main-col">
            <h3>Select build context directory</h3>
           <strong>Please select the build context directory under the git repository:</strong>
           <input class="form-control" type="text" placeholder="/"
                  ng-model="$ctrl.config.subdir" ng-pattern="/^($|\/|\/.+)/">
          </div>
          <div class="col-lg-5 col-md-5 hidden-sm hidden-xs help-col">
            <p>The build context directory is the path of the directory containing the Dockerfile and any other files to be made available when the build is triggered.</p>
            <p>If the Dockerfile is located at the root of the git repository, enter <code>/</code> as the build context directory.</p>
          </div>
    
        </div><!-- /Section: Build context -->
    </div>
  `
})
export class ManageTriggerCustomGitComponent implements ng.IComponentController {

  // FIXME: Use one-way data binding
  @Input('=') public trigger: {config: any};
  @Output() public activateTrigger: any;
  private config: any = {};
  private currentState: any | null;
  private gitUrlRegEx: string = "((ssh|http(s)?)|(git@[\w\.]+))(:(//)?)([\w\.@\:/\-~]+)(\.git)(/)?";

  public $onChanges(changes: ng.IOnChangesObject): void {
    if (changes['trigger'] !== undefined) {
      this.config = Object.assign({}, changes['trigger'].currentValue.config);
    }
  }
}