const officeParking = ["Toronto","Lab62","Lab64","Lab72","Lab72/1","Zeus Lab"]

// ===============================

var hasParkingId = false

// ===============================

const dateList = createCustomDates(fsNative.dates, parkingActive, true)

// ===============================

const userEmail = "{{current_user.email}}"
      console.log(userEmail)
      fetch(`https://freshservicecounter.ringteam.com/getparkingidentry?email=${userEmail}`).then(res => {
        console.log(res.status)
        if (res.status === 200) hasParkingId = true
      })

// ===============================

const parkingElems = document.getElementsByClassName("parkingwrapper")
        if (officeParking.includes(values.office) && hasParkingId) {
          for(let elem of parkingElems) {
            elem.style.display = "inline-flex"
          }
        } else {
          for(let elem of parkingElems) {
            elem.style.display = "none"
            elem.querySelector("input").checked = false
          }
        }

// ===============================

function createCustomDates(nativeList, parkingActive, createAddLocation = false){
    var customDateCollection = []
    nativeList.forEach((dateNativeField, index) => {
      dateNativeField.parentNode.style.display = "none"
      const dateField = document.createElement("input")
      const elemId = "date_custom_" + (index + 1)
      dateField.id = elemId
      const controlWrapper = document.createElement("span")
      controlWrapper.id = "controls_" + index
      controlWrapper.style.marginLeft = "5px"
      controlWrapper.style.minWidth = "50px"
      controlWrapper.style.display = "inline-block"
      dateNativeField.parentNode.parentNode.append(dateField)
      dateNativeField.parentNode.parentNode.append(controlWrapper)

      if (createAddLocation) {
        const addLocationWrapper = document.createElement("div")
        addLocationWrapper.id = "addtable_wrapper_" + (index+1)
        const addLocationHeader = document.createElement("div")
        addLocationHeader.style.textColor = "lightgrey"
        addLocationHeader.style.fontSize = "16px"
        const addLocationArrow = document.createElement("span")
        addLocationHeader.appendChild(addLocationArrow)
        addLocationArrow.innerHTML = "►"
        addLocationHeader.innerHTML += "Select additional locations"
        const addLocationTableContainer = document.createElement("div")
        addLocationTableContainer.id = "addtable_" + (index+1)
        addLocationTableContainer.className += "addtable-container"
        jQuery(addLocationTableContainer).hide()
        addLocationHeader.onclick = function(){
          console.log(addLocationArrow.innerHTML, addLocationArrow.innerHTML === "►")
          addLocationArrow.innerHTML = (addLocationArrow.innerHTML === "►") ? "▼" : "►"
          jQuery(addLocationTableContainer).toggle(200)
        }
        addLocationWrapper.appendChild(addLocationHeader)
        addLocationWrapper.appendChild(addLocationTableContainer)
        if (parkingActive) {
          const parkingWrapper = document.createElement("div")
          parkingWrapper.className += "parkingwrapper"
          parkingWrapper.id = "parkingwrapper_" + (index+1)
          parkingWrapper.style.display = "inline-flex"
          const parkingCheckbox = document.createElement("input")
          parkingCheckbox.type = "checkbox"
          parkingCheckbox.id = "parking_" + (index+1)
          const parkingLabel = document.createElement("label")
          parkingLabel.htmlFor = "parking_" + (index+1)
          parkingLabel.innerHTML = "Request parking"
          parkingLabel.style.marginLeft = "5px"
          const parkingCapacity = document.createElement("span")
          parkingCapacity.id = "parkingcapacity_" + (index+1)
          parkingCapacity.style.marginLeft = "5px"
          parkingWrapper.appendChild(parkingCheckbox)
          parkingWrapper.appendChild(parkingLabel)
          parkingWrapper.appendChild(parkingCapacity)
          addLocationWrapper.appendChild(parkingWrapper)
          //parkingWrapper.hidden = true
        }
        dateNativeField.parentNode.parentNode.append(addLocationWrapper)
      }

      if (index > 0) dateNativeField.parentNode.parentNode.style.display = "none"
      customDateCollection.push(dateField)
      jQuery("#"+elemId).datepicker({
        dateFormat: "yy-mm-dd",
        firstDay: 1
      })
    })
    return customDateCollection
  }