<div class="header" #header>
  <h2>
    <span *ngIf="section != 'Team Selection'">{{teamNumber}}</span>
    {{section}}
  </h2>
</div>
<ng-container [ngSwitch]="section">
  <div
    *ngSwitchCase="'Team Selection'"
    id="team_selection"
    class="container-fluid"
  >
    <div class="row">
      <label for="match_number">Match Number</label>
      <input
        [(ngModel)]="matchNumber"
        (ngModelChange)="updateTeamSelectionValidity()"
        type="number"
        id="match_number"
        min="1"
        max="999"
      />
    </div>
    <div class="row">
      <label for="team_number">Team Number</label>
      <input
        [(ngModel)]="teamNumber"
        (ngModelChange)="updateTeamSelectionValidity()"
        type="number"
        id="team_number"
        min="1"
        max="9999"
      />
    </div>
    <div class="row">
      <label for="set_number">Set Number</label>
      <input
        [(ngModel)]="setNumber"
        (ngModelChange)="updateTeamSelectionValidity()"
        type="number"
        id="set_number"
        min="1"
        max="10"
      />
    </div>
    <div class="row">
      <label for="comp_level">Comp Level</label>
      <select
        [(ngModel)]="compLevel"
        (ngModelChange)="updateTeamSelectionValidity()"
        type="number"
        id="comp_level"
      >
        <option *ngFor="let level of COMP_LEVELS" [ngValue]="level">
          {{COMP_LEVEL_LABELS[level]}}
        </option>
      </select>
    </div>
    <div class="row">
      <label>
        <input
          id="pre_scouting"
          type="checkbox"
          [(ngModel)]="preScouting"
          (ngModelChange)="updateTeamSelectionValidity()"
        />
        Pre-scouting
      </label>
    </div>
    <div class="buttons">
      <!-- hack to right align the next button -->
      <div></div>
      <button
        class="btn btn-primary"
        (click)="changeSectionTo('Init');"
        [disabled]="!teamSelectionIsValid"
      >
        Next
      </button>
    </div>
  </div>
  <div *ngSwitchCase="'Init'" id="init" class="container-fluid">
    <h2>Select Starting Position</h2>
    <img
      id="field_starting_positions_image"
      src="/sha256/b71def525fb78486617a8b350c0ba6907e8ea25f78d4084a932cba8ae922528c/pictures/field/field.jpg"
      alt="Starting Positions Image"
      class="img-fluid"
    />
    <div *ngFor="let i of [1, 2, 3, 4]">
      <label>
        <input
          type="radio"
          name="radio-group"
          [value]="i"
          (change)="selectedValue = $event.target.value"
        />
        {{ i }}
      </label>
    </div>
    <div class="buttons">
      <!-- Creates a responsive stack of full-width, "block buttons". -->
      <div class="d-grid gap-5">
        <button
          class="btn btn-primary"
          [disabled]="!selectedValue"
          (click)="changeSectionTo('Pickup'); addAction({type: 'startMatchAction', position: selectedValue});"
        >
          Start Match
        </button>
      </div>
    </div>
  </div>
  <div *ngSwitchCase="'Pickup'" id="PickUp" class="container-fluid">
    <h6 class="text-muted">
      Last Action: {{actionList[actionList.length - 1].type}}
    </h6>
    <!--
      Decrease distance between buttons during auto to make space for auto balancing
      selection and keep all buttons visible without scrolling on most devices.
    -->
    <div
      [ngClass]="{'d-grid': true, 'gap-3': autoPhase === true, 'gap-5': autoPhase === false}"
    >
      <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
      <button
        class="btn btn-danger"
        (click)="changeSectionTo('Dead'); addAction({type: 'robotDeathAction', robotOn: false});"
      >
        DEAD
      </button>
      <button
        class="btn btn-warning"
        (click)="changeSectionTo('Place'); addAction({type: 'pickupObjectAction', objectType: ObjectType.kCone});"
      >
        CONE
      </button>
      <button
        class="btn btn-primary"
        (click)="changeSectionTo('Place'); addAction({type: 'pickupObjectAction', objectType: ObjectType.kCube});"
      >
        CUBE
      </button>
      <button
        *ngIf="autoPhase && !mobilityCompleted"
        class="btn btn-light"
        (click)="addAction({type: 'mobilityAction', mobility: true});"
      >
        Mobility
      </button>
      <!-- 'Balancing' during auto. -->
      <div *ngIf="autoPhase" class="d-grid gap-2">
        <label>
          <input
            #docked
            type="radio"
            id="option1"
            name="docked_engaged"
            value="docked"
          />
          Docked (on the charging station)
        </label>
        <label>
          <input
            #engaged
            type="radio"
            id="option2"
            name="docked_engaged"
            value="dockedengaged"
          />
          Docked &amp; Engaged (level &amp; station lights on)
        </label>
        <label>
          <input
            #attempted
            type="radio"
            id="option3"
            name="docked_engaged"
            value="failed"
          />
          Attempted to dock and engage but failed
        </label>
        <button
          class="btn btn-dark"
          (click)="autoPhase = false; addAction({type: 'endAutoPhase'}); addAction({type: 'autoBalanceAction', docked: docked.checked, engaged: engaged.checked, balanceAttempt: attempted.checked});"
        >
          Start Teleop
        </button>
      </div>
      <button
        *ngIf="!autoPhase"
        class="btn btn-info"
        (click)="changeSectionTo('Endgame')"
      >
        Endgame
      </button>
    </div>
  </div>
  <div *ngSwitchCase="'Place'" id="Place" class="container-fluid">
    <h6 class="text-muted">
      Last Action: {{actionList[actionList.length - 1].type}}
    </h6>
    <!--
      Decrease distance between buttons during auto to make space for auto balancing
      selection and keep all buttons visible without scrolling on most devices.
    -->
    <div
      [ngClass]="{'d-grid': true, 'gap-3': autoPhase === true, 'gap-5': autoPhase === false}"
    >
      <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
      <button
        class="btn btn-danger"
        (click)="changeSectionTo('Dead'); addAction({type: 'robotDeathAction', robotOn: false});"
      >
        DEAD
      </button>
      <button
        class="btn btn-success"
        (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kHigh});"
      >
        HIGH
      </button>
      <button
        class="btn btn-warning"
        (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kMiddle});"
      >
        MID
      </button>
      <button
        class="btn btn-danger"
        (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kLow});"
      >
        LOW
      </button>
      <button
        *ngIf="autoPhase && !mobilityCompleted"
        class="btn btn-light"
        (click)="addAction({type: 'mobilityAction', mobility: true});"
      >
        Mobility
      </button>
      <!-- Impossible to place supercharged pieces in auto. -->
      <div *ngIf="autoPhase == false" class="d-grid gap-2">
        <button
          class="btn btn-dark"
          (click)="changeSectionTo('Pickup'); addAction({type: 'placeObjectAction', scoreLevel: ScoreLevel.kSupercharged});"
        >
          SUPERCHARGED
        </button>
      </div>
      <!-- 'Balancing' during auto. -->
      <div *ngIf="autoPhase" class="d-grid gap-1">
        <label>
          <input
            #docked
            type="radio"
            id="option1"
            name="docked_engaged"
            value="docked"
          />
          Docked (on the charging station)
        </label>
        <label>
          <input
            #engaged
            type="radio"
            id="option2"
            name="docked_engaged"
            value="dockedengaged"
          />
          Docked &amp; Engaged (level &amp; station lights on)
        </label>
        <label>
          <input
            #attempted
            type="radio"
            id="option3"
            name="docked_engaged"
            value="failed"
          />
          Attempted to dock and engage but failed
        </label>
        <button
          class="btn btn-dark"
          (click)="autoPhase = false; addAction({type: 'endAutoPhase'}); addAction({type: 'autoBalanceAction', docked: docked.checked, engaged: engaged.checked, balanceAttempt: attempted.checked});"
        >
          Start Teleop
        </button>
      </div>
      <button
        *ngIf="!autoPhase"
        class="btn btn-info"
        (click)="changeSectionTo('Endgame')"
      >
        Endgame
      </button>
    </div>
  </div>
  <div *ngSwitchCase="'Endgame'" id="Endgame" class="container-fluid">
    <h6 class="text-muted">
      Last Action: {{actionList[actionList.length - 1].type}}
    </h6>
    <div class="d-grid gap-5">
      <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
      <button
        class="btn btn-danger"
        (click)="changeSectionTo('Dead'); addAction({type: 'robotDeathAction', robotOn: false});"
      >
        DEAD
      </button>
      <label>
        <input
          #docked
          type="radio"
          id="option1"
          name="docked_engaged"
          value="docked"
        />
        Docked (on the charging station)
      </label>
      <label>
        <input
          #engaged
          type="radio"
          id="option2"
          name="docked_engaged"
          value="dockedengaged"
        />
        Docked &amp; Engaged (level &amp; station lights on)
      </label>
      <label>
        <input
          #attempted
          type="radio"
          id="option3"
          name="docked_engaged"
          value="failed"
        />
        Attempted to dock and engage but failed
      </label>
      <button
        *ngIf="!autoPhase"
        class="btn btn-info"
        (click)="changeSectionTo('Review and Submit'); addAction({type: 'endMatchAction', docked: docked.checked, engaged: engaged.checked, balanceAttempt: attempted.checked});"
      >
        End Match
      </button>
    </div>
  </div>
  <div *ngSwitchCase="'Dead'" id="Dead" class="container-fluid">
    <h2>Robot is dead</h2>
    <div class="d-grid gap-2">
      <button
        class="btn btn-success"
        (click)="changeSectionTo('Pickup'); addAction({type: 'robotDeathAction', robotOn: true}); "
      >
        Revive
      </button>
      <button
        class="btn btn-info"
        (click)="changeSectionTo('Review and Submit'); addAction({type: 'endMatchAction', docked: docked.checked, engaged: engaged.checked});"
      >
        End Match
      </button>
    </div>
  </div>
  <div *ngSwitchCase="'Review and Submit'" id="Review" class="container-fluid">
    <div class="row">
      <ul id="review_data">
        <li
          *ngFor="let action of actionList"
          [ngValue]="action"
          style="display: flex"
        >
          <div [ngSwitch]="action.type" style="padding: 0px">
            <span *ngSwitchCase="'startMatchAction'">
              Started match at position {{action.position}}
            </span>
            <span *ngSwitchCase="'pickupObjectAction'">
              Picked up {{stringifyObjectType(action.objectType)}}
            </span>
            <span *ngSwitchCase="'placeObjectAction'">
              Placed at {{stringifyScoreLevel(action.scoreLevel)}}
            </span>
            <span *ngSwitchCase="'autoBalanceAction'">
              Docked: {{action.docked}}, engaged: {{action.engaged}}, attempted
              to balance and engage: {{action.balanceAttempt}}
            </span>
            <span *ngSwitchCase="'endAutoPhase'">Ended auto phase</span>
            <span *ngSwitchCase="'endMatchAction'">
              Ended Match; docked: {{action.docked}}, engaged:
              {{action.engaged}}, attempted to dock and engage:
              {{action.balanceAttempt}}
            </span>
            <span *ngSwitchCase="'robotDeathAction'">
              Robot on: {{action.robotOn}}
            </span>
            <span *ngSwitchCase="'mobilityAction'">
              Mobility: {{action.mobility}}
            </span>
            <span *ngSwitchDefault>{{action.type}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="d-grid gap-5">
      <button class="btn btn-secondary" (click)="undoLastAction()">UNDO</button>
      <button class="btn btn-warning" (click)="submitActions();">Submit</button>
    </div>
  </div>
  <div *ngSwitchCase="'Success'" id="Success" class="container-fluid">
    <h2>Successfully submitted data.</h2>
  </div>

  <span class="progress_message" role="alert">{{ progressMessage }}</span>
  <span class="error_message" role="alert">{{ errorMessage }}</span>
</ng-container>