class MeidoCart{
  constructor(itemList, limit, cartElem, dateElemsCollection, fsMeidoField, reverseDate){
    console.log('constructing')
    this.itemList = itemList
    this.dailyLimit = limit
    //this.renderElementId = elemId
    this.renderTarget = cartElem
    this.reverseDate = reverseDate
    this.targetField = fsMeidoField
    this.dateElemsCollection = dateElemsCollection
    console.log(this.dateElemsCollection)
    this.dateCollection = null
    this.selectedRadio = null

    this.dateElemsCollection.forEach(dateElem => {
      dateElem.onchange = function(){
        this.calcDateCollection()
        this.render()
      }
    })
  }

  init(){
    this.calcDateCollection()
  }

  reverse(date){
    const vals = date.split("-")
    //return `${vals[2]}-${vals[1]}-${vals[0]}`
    return vals[2]+"-"+vals[1]+"-"+vals[0]
  }

  calcDateCollection(){
    if (!this.dateCollection) this.dateCollection = {}
    var flag = false
    var collection = []
    var dateObj = {}
    this.dateElemsCollection.forEach(dateElem => {
      if (dateElem.value) {
        flag = true
        collection.push(dateElem.value)
      }
      const weekday = new Date(dateElem.value).getDay()
      if (dateElem.value && weekday !== 6 && weekday !== 0){
        if (!this.dateCollection[dateElem.value]){
          dateObj[dateElem.value] = {
            limit: this.dailyLimit,
            items: {}
          }
        } else {
          dateObj[dateElem.value] = this.dateCollection[dateElem.value]
        }
      }
    })
    if (!this.selectedRadio || !collection.includes(this.selectedRadio)) this.selectedRadio = this.dateElemsCollection[0].value
    if (!flag) dateObj = null
    this.dateCollection = dateObj
    this.render()
  }

  get cartState(){
    return JSON.stringify(this.dateCollection)
  }

  render(){
    const wrapper = document.createElement("div")
    if (!this.dateCollection) {
      wrapper.innerHTML = "Диапазон дат указан неверно!"
    } else {
      for(let date in this.dateCollection){
        const dateWrapper = document.createElement("div")
        dateWrapper.className += "meido-cart-date-wrapper"
        const header = document.createElement("div")
        header.className += "meido-cart-date-header"
        const radio = document.createElement("input")
        radio.type = "radio"
        radio.id = date
        radio.value = date
        radio.name = "date-radio"
        radio.addEventListener('change', function(e){
          this.selectedRadio = e.target.value
        }.bind(this))
        if (date === this.selectedRadio) radio.checked = true
        header.appendChild(radio)
        const label = document.createElement("label")
        label.htmlFor = date
        //label.innerHTML += `${date} (остаток: ${this.dateCollection[date].limit} грн.)`
        label.innerHTML += date+" (остаток: "+this.dateCollection[date].limit+" грн.)"
        header.appendChild(label)
        dateWrapper.appendChild(header)
        var flag = false
        for(let item in this.dateCollection[date].items){
          flag = true
          const itemElem = document.createElement("div")
          itemElem.className += "meido-cart-item"
          const itemText = document.createElement("span")
          //itemText.innerHTML = `${this.dateCollection[date].items[item]} x ${this.itemList[item].name}`
          itemText.innerHTML = this.dateCollection[date].items[item]+" x "+this.itemList[item].name
          itemText.style.width = "90%"
          itemElem.appendChild(itemText)
          const itemRemove = document.createElement("button")
          itemRemove.innerHTML = "X"
          itemRemove.className += "meido-cart-item-remove"
          itemRemove.onclick = function(){ this.removeMeidoItem(item, date) }.bind(this)
          itemElem.appendChild(itemRemove)
          dateWrapper.appendChild(itemElem)
        }
        if (!flag) {
          const itemEmpty = document.createElement("div")
          itemEmpty.className += "meido-cart-item"
          itemEmpty.style.color = "grey"
          itemEmpty.innerHTML = "<i>Ничего не добавлено</i>"
          dateWrapper.appendChild(itemEmpty)
        }
        wrapper.appendChild(dateWrapper)
      }
    }
    this.renderTarget.innerHTML = ""
    this.renderTarget.appendChild(wrapper)
    document.getElementById(this.targetField).innerHTML = this.cartState
  }

  addMeidoItem(itemId){
    if (this.dateCollection[this.selectedRadio].limit - this.itemList[itemId].price >= 0) {
      if (!this.dateCollection[this.selectedRadio].items[itemId]) {
        this.dateCollection[this.selectedRadio].items[itemId] = 1
      } else {
        this.dateCollection[this.selectedRadio].items[itemId] += 1
      }
      this.dateCollection[this.selectedRadio].limit -= this.itemList[itemId].price
    } else {
      console.error('Insufficient funds!')
    }
    this.render()
  }

  removeMeidoItem(itemId, date){
    this.dateCollection[date].items[itemId] -= 1
    if (this.dateCollection[date].items[itemId] === 0) delete this.dateCollection[date].items[itemId]
    this.dateCollection[date].limit += this.itemList[itemId].price
    this.render()
  }
}

function meidoInit(container, dateElemsCollection, fsMeidoField, limit, reverseDate = false){
  const innerContainer = document.createElement("div")

  return fetch("https://analytics.getmeido.com/api/fs/product-list?token="+meidoToken)
  .then(res => {return res.json()})
  .then(data => {
    const title = document.createElement("h4")
    title.innerHTML = "Заказ еды Meido"
    innerContainer.appendChild(title)
    const mainWindow = buildMeidoWindow(data, dateElemsCollection, fsMeidoField, limit, reverseDate)
    innerContainer.appendChild(mainWindow)
    meidoCart.init()
    container.appendChild(innerContainer)
    return innerContainer
  }).catch(err => {
    console.error("[MEIDO] Cannot get Meido menu!")
    console.error(err)
  })

}

function buildMeidoWindow(apiData, dateElemsCollection, fsMeidoField, limit, reverseDate){
  const wrapper = document.createElement("div")
  wrapper.className += "meido-main-window"
  const menuElem = document.createElement("div")
  menuElem.id = "meido-menu"
  const cartElem = document.createElement("div")
  cartElem.id = "meido-cart"
  var categorized = {}
  var flat = {}
  apiData.forEach(item => {
    if (!categorized[item.product_contractor_title]) categorized[item.product_contractor_title] = {}
    if (!categorized[item.product_contractor_title][item.category_title]) categorized[item.product_contractor_title][item.category_title] = {}
    categorized[item.product_contractor_title][item.category_title][item.id] = item
    flat[item.id] = {
      name: item.product_title,
      price: parseFloat(item.product_price),
      bzhu: item.bzhu,
      weight: item.weight,
      cal: item.cal
    }
  })
  menuElem.appendChild(buildMenu(categorized))
  console.log(limit, dateElemsCollection, reverseDate)
  window.meidoCart = new MeidoCart(flat, limit, cartElem, dateElemsCollection, fsMeidoField, reverseDate)
  cartElem.className += "meido-cart-wrapper"
  wrapper.appendChild(menuElem)
  wrapper.appendChild(cartElem)
  return wrapper
}

function buildMenu(data){
  const wrapper = document.createElement("div")
  wrapper.className += "meido-menu-wrapper"
  for(let category in data){
    const categoryWrapper = document.createElement("div")
    const categoryHeader = document.createElement("div")
    categoryHeader.className += "meido-category-title"
    const categoryArrow = document.createElement("span")
    categoryArrow.className += "arrow"
    categoryArrow.innerHTML = "►"
    const categoryTitle = document.createElement("span")
    categoryTitle.innerHTML = category
    categoryHeader.appendChild(categoryArrow)
    categoryHeader.appendChild(categoryTitle)
    const categoryContent = document.createElement("div")
    categoryContent.className += "meido-category-content"
    categoryHeader.onclick = function(){
      categoryContent.hidden = !categoryContent.hidden
      categoryArrow.innerHTML = (categoryArrow.innerHTML === "►" ? "▼" : "►")
    }
    categoryContent.hidden = true
    categoryWrapper.appendChild(categoryHeader)
    for(let contractor in data[category]){
      const contractorWrapper = document.createElement("div")
      const contractorHeader = document.createElement("div")
      contractorHeader.className += "meido-contractor-title"
      const contractorArrow = document.createElement("span")
      contractorArrow.className += "arrow"
      contractorArrow.innerHTML = "►"
      const contractorTitle = document.createElement("span")
      contractorTitle.innerHTML = contractor
      contractorHeader.appendChild(contractorArrow)
      contractorHeader.appendChild(contractorTitle)
      const contractorContent = document.createElement("div")
      contractorContent.className += "meido-contractor-content"
      contractorHeader.onclick = function(){
        contractorContent.hidden = !contractorContent.hidden
        contractorArrow.innerHTML = (contractorArrow.innerHTML === "►" ? "▼" : "►")
      }
      contractorContent.hidden = true
      contractorWrapper.appendChild(contractorHeader)
      for(let item in data[category][contractor]){
        contractorContent.appendChild(buildMenuItem(data[category][contractor][item]))
      }
      contractorWrapper.appendChild(contractorContent)
      categoryContent.appendChild(contractorWrapper)
    }
    categoryWrapper.appendChild(categoryContent)
    wrapper.appendChild(categoryWrapper)
  }

  return wrapper
}

function buildMenuItem(item){
  const wrapper = document.createElement("div")
  wrapper.className += "meido-item"
  const itemTitle = document.createElement("div")
  itemTitle.innerHTML = item.product_title
  itemTitle.className += "meido-item-title"
  const descWrapper = document.createElement("div")
  descWrapper.className += "meido-desc-wrapper"
  const itemPic = document.createElement("img")
  itemPic.src = item.photo_url
  itemPic.className += "meido-pic"
  const innerWrapper = document.createElement("div")
  const itemDesc = document.createElement("div")
  itemDesc.innerHTML = item.product_description
  itemDesc.className += "meido-desc-text"
  const itemInfo = document.createElement("div")
  itemInfo.innerHTML = item.weight + " gr.    " + item.cal
  itemInfo.className += "meido-item-bzhu"
  const itemBzhu = document.createElement("div")
  itemBzhu.innerHTML = item.bzhu
  itemBzhu.className += "meido-item-bzhu"
  descWrapper.appendChild(itemPic)
  innerWrapper.appendChild(itemDesc)
  innerWrapper.appendChild(itemInfo)
  descWrapper.appendChild(innerWrapper)
  const price = document.createElement("span")
  //price.innerHTML = `<i>Цена: ${item.product_price} грн.</i>`
  price.innerHTML = "Цена: "+item.product_price+" грн."
  price.className += "meido-price"
  const add = document.createElement("button")
  add.innerHTML = "Buy"
  add.className += "meido-add-button"
  add.onclick = null
  add.onclick = function(e){
    e.preventDefault()
    meidoCart.addMeidoItem(item.id)
  }
  wrapper.appendChild(itemTitle)
  wrapper.appendChild(descWrapper)
  wrapper.appendChild(itemBzhu)
  wrapper.appendChild(add)
  wrapper.appendChild(price)
  return wrapper
}