"use strict";


function Html(tournamentOptions) {
  this.hideAll = function () {
    $('#register').hide();
    $('#tournamentOptions').hide();
    $('#searchResults').hide();
    $('#clubSearchResults').hide();
    $('#playersTableBody').empty();
  }

  this.addPlayerNotFound = function () {
    $('#playersNotFoundTableBody').empty();
    $('#playersNotFoundTableBody').append(getPlayerNotFoundRow());

    $('#newPlayerForm').submit(function (event) {
      event.preventDefault();
      $('#tournamentOptions').show();
      tournamentOptions.show()
      scrollToBottom();
    });
  }

  this.addRowToPlayersTable = function (player) {
    let isTooOld = player.birth_year < 2000
    let isRegistered = !!player.group

    let isAllowedToPlay = !isTooOld && !isRegistered
    let errorString = "";

    if (!isAllowedToPlay && isTooOld)
      errorString = '<span class="text-danger"> &lt; 2000<span>'

    if (!isAllowedToPlay && isRegistered)
      errorString += `<br><span class="text-danger">bereits in Gruppe ${player.group} registriert <span>`

    let disabledAttribute = isAllowedToPlay ? '' : 'disabled';
    let disabledClass = isAllowedToPlay ? '' : 'disabled-row';
    let tableRow = `<tr class="${disabledClass}">
        <td><input type="radio" name="selectedPlayer" 
        value="${player.zps}" ${disabledAttribute}></td>
        <td>${player.last_name}</td>
        <td>${player.first_name}</td>
        <td>${player.club_name}</td>    
        <td>${player.member_nr}</td>    
        <td>${player.sex}</td>
        <td>${player.birth_year + errorString}</td>
    </tr>`
    $('#playersTableBody').append(tableRow);
  }

  this.addGetTournamentDropdown = function (player) {
    let possibleTournaments = tournamentOptions.getTournamentOptionsFor(player)
    return createSelectHTMLFromObjects(possibleTournaments)
  }

  function createSelectHTMLFromObjects(possibleTournaments) {
    let selectHTML = '<select class="tournament-select">';

    possibleTournaments.forEach(function (tournament) {
      selectHTML += `<option class="tournament-options" value="${tournament.id}" name="${tournament.name}">${tournament.name}</option>`;
    });

    selectHTML += '</select>';
    return selectHTML;
  }

  function getPlayerNotFoundRow() {
    let first_name = $('#registrationForm input[name="first_name"]').val().trim();
    let last_name = $('#registrationForm input[name="last_name"]').val().trim();

    return `<form id="newPlayerForm">
              <div class="row">
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="first_name">Vorname</label>
                    <input type="text" class="form-control"
                     id="first_name" name="first_name"
                      value=" ${first_name}" required>                   
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <label for="last_name">Nachname</label>
                    <input type="text" class="form-control"
                     id="last_name" name="last_name"
                      value="${last_name}" required>                    
                  </div>
                </div>
              </div>
              <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label for="sex">Geschlecht</label>
                  <select class="form-control" id="sex" name="sex" required>
                  <option value="" disabled selected>Bitte w&auml;hlen</option>
                  <option value="W">Weiblich</option>
                  <option value="M">M&auml;nnlich</option>
                  <option value="D">Divers</option>
                </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label for="birth_year">Geburtsjahr</label>
                  <input type="number" class="form-control" min="2000" max="2022"
                   id="birth_year" name="birth_year" required>
                </div>
              </div>
            </div>
              <div class="row">
                 <div class="col-md-12">
                   <div class="form-group">
                     <label for="club">Verein (optional)</label>
                     <input type="text" class="form-control" id="club" name="club">
                   </div>
                 </div>
              </div>
              <button type="submit" class="btn btn-ske-submit">Turniere anzeigen</button>
            </form>`;
  }

  this.setClubModalAndShow = function (aClubPlayers) {
    let $clubModal = $('#clubSummaryModal');
    let $modalBody = $clubModal.find('.modal-body')
    $modalBody.empty()
    let modalContent = createClubPlayerSummaryTable(aClubPlayers)

    modalContent += `<div class="form-group no-left-label">
    <label for="email">E-Mail:</label>
    <input type="email" class="form-control" id="email" name="email" required>
  </div>`
    $modalBody.html(modalContent)
    $('#clubSummaryModal').modal('show');
  }

  function createClubPlayerSummaryTable(aClubPlayers) {
    let tableHTML = `<div class="table-responsive">   
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Vorname</th>
                <th scope="col">Name</th>
                <th scope="col">M/W</th>
                <th scope="col">Jahrgang</th>
                <th scope="col">Turnier</th>
            </tr>
        </thead>
        <tbody>`;

    for (let player of aClubPlayers) {
      tableHTML += `
        <tr>
            <td>${player.first_name}</td>
            <td>${player.last_name}</td>
            <td>${player.sex}</td>
            <td>${player.birth_year}</td>
            <td>${player.group}</td>
        </tr>`;
    };

    tableHTML += `
        </tbody>
    </table>
    </div>`;

    return tableHTML;
  }
}