// port.js

class SingleData {
  constructor (port, order, type, value) {
    this.port = port
    this.order = order
    this.type = type
    this.value = value
  }
}

export let inputVariables = []
export let countVariables = []

// Add a new port
export function Add (countInputPort) {
  countInputPort++
  inputVariables[countInputPort] = []
  countVariables[countInputPort] = 0
  $('div#inputPortList').append(
    `<div class="list-group-item list-group-item-action" data-toggle="modal"
      data-target="#addNewModal${countInputPort}" id="inputPort${countInputPort}">
      Port ${countInputPort}</div>`
  )
  $(`#inputPort${countInputPort}`).click(function () {
    portDetail(countInputPort)
  })
  return true
}

// Show Details of Port
export function portDetail (countInputPort) {
  let container = ''
  let order = countVariables[countInputPort]
  // Show exist variables
  for (let variable of inputVariables[countInputPort]) {
    container += `<li class="list-group-item list-group-item-action">
      <p class="mb-1 float-left text-primary">${variable.order + 1}&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p class="mb-1 float-left variable-type"><label class="variable-type" order="${variable.order}">
        ${variable.type}</label>&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p class="mb-1 float-left">
        <input type="text" class="form-control variable-value" order="${variable.order}" value="${variable.value}">
      </p>
      </li>`
  }
  // Show variables list
  $('div#modalArea').html(
    `<div class="modal fade" id="addNewModal${countInputPort}" tabindex="-1" role="dialog"
      aria-labelledby="addNewModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="addNewModalLabel">Port ${countInputPort}</h5>
            <button class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="form-row" id="globalDt">
              <select class="form-control col-md-7 mx-sm-3 mb-3" id="dt">
                <option value="Numeric">Numeric</option>
                <option value="Character">Character</option>
                <option value="Enumeration">Enumeration</option>
                <option value="Boolean">Boolean</option>
                <option value="Set">Set</option>
                <option value="Sequence">Sequence</option>
                <option value="String">String</option>
                <option value="Composite">Composite</option>
                <option value="Product">Product</option>
                <option value="Map">Map</option>
                <option value="Union">Union</option>
                <option value="Class">Class</option>
              </select>
              <button class="btn btn-outline-primary col-md-4 mb-3" id="addVariable">Add</button>
            </div>
            <!-- list of data types -->
            <div>
              <ul class="list-group" id="variables">
                ${container}
              </ul>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary" id="savePort">Save changes</button>
            <button class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>`
  )
  // Add a new variables
  $('button#addVariable').click(function () {
    let selectedValue = $('select#dt').val()
    console.log(order)
    $('ul#variables').append(
      `<li class="list-group-item list-group-item-action">
        <p class="mb-1 float-left text-primary">${order + 1}&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p class="mb-1 float-left variable-type"><label class="variable-type" order=${order}>
          ${selectedValue}</label>&nbsp;&nbsp;&nbsp;&nbsp;</p>
        <p class="mb-1 float-left">
          <input type="text" class="form-control variable-value" order="${order}" placeholder="${selectedValue}">
        </p>
      </li>`
    )
    order++
  })
  // Save port
  $('button#savePort').click(function () {
    let i
    for (i = 0; i < order; i++) {
      let type = $(`label.variable-type[order$="${i}"]`).text()
      let value = $(`input.variable-value[order$="${i}"]`).val()
      // console.log(type + '\n' + value)
      inputVariables[countInputPort][i] = new SingleData(countInputPort, i, type, value)
      console.log(`saved:
      port: ${countInputPort}
      order: ${i}
      type: ${type}
      value: ${value}`)
    }
    countVariables[countInputPort] = i
    console.log('total: ' + countVariables[countInputPort])
  })
}

export function Update (id, value) {
  let editId = 'div#' + id
  $(editId).text(value)
}
