$(document).ready(function() {
  fetch((window.baseUrl || '') + '/assets/html/custombar.html').then(function(response) {
    return response.text()
  }).then(function(html) {
    html = html.replace(/assets\/img\//g, (window.baseUrl || '') + 'assets/img/')
    $('#custombar').before(html).remove()
    render()
  })
})

var state = {
  letters:      '',
  materials:    ['white', 'white'],
  activeLetter: 0,
}

$(document).on('input', '.js-input', function(evt) {
  setState({
    letters: $(this).val()
  })
})
$(document).on('click', '.js-swatch-link', function(evt) {
  var materials = state.materials.concat([]);
  materials[state.activeLetter] = $(this).data('color')

  setState({
    materials: materials
  })
})
$(document).on('click', '.js-tab', function(evt) {
  setState({
    activeLetter: $(this).data('index')
  })
})

function setState(newState) {
  state = Object.assign({}, state, newState)
  render()
}

function updateCustomInfo() {
  var productDescription = 'Danny-Black'
  if( state.letters.length > 0 ) {
    productDescription += ` / ${state.letters[0].toUpperCase()}-${state.materials[0]}`
  }
  if( state.letters.length > 1 ) {
    productDescription += ` / ${state.letters[1].toUpperCase()}-${state.materials[1]}`
  }

  $("#custombar-custom-info").val(productDescription);
}

function render() {
  // reset
  $('.js-letters').html('')
  $('.js-tab').html('')
  $('.js-tab').removeClass('active')
  $('.js-swatch').removeClass('active')

  // render letters
  if( state.letters.length > 0 ) {
    var letter1 = letter({ letter: state.letters[0], material: state.materials[0]})
    $('.js-letters').append(letter1)
    $('.js-tab:eq(0)').append(letter1.clone())
  }
  if( state.letters.length > 1 ) {
    var letter2 = letter({ letter: state.letters[1], material: state.materials[1]})
    $('.js-letters').append(letter2)
    $('.js-tab:eq(1)').append(letter2.clone())
  }

  // render active tab
  $(`.js-tab[data-index=${state.activeLetter}]`).addClass('active')

  // render active swatch
  $(`.js-swatch[data-color=${state.materials[state.activeLetter]}]`).addClass('active')
  updateCustomInfo()
}

function letter(props) {
  var alt = `${props.letter} in ${props.material}`
  var src = `${window.baseUrl || ''}assets/img/letters/${props.letter.toUpperCase()}-${props.material}.png`;
  return $(`<img src="${src}" alt="${alt}"/>`)
}

@@ -403,16 +403,39 @@
 ter: 0,%0A
+  editing:      false,%0A
 %7D%0A%0A$(doc
@@ -841,16 +841,152 @@
 'index')
+,%0A  %7D)%0A%7D)%0A$(document).on('click', '.js-letter', function(evt) %7B%0A  setState(%7B%0A    editing: true,%0A    activeLetter: $(this).data('index'),
 %0A  %7D)%0A%7D)
@@ -1755,16 +1755,26 @@
 rials%5B0%5D
+, index: 0
 %7D)%0A    $
@@ -1972,16 +1972,26 @@
 rials%5B1%5D
+, index: 1
 %7D)%0A    $
@@ -2501,16 +2501,21 @@
 turn $(%60
+%0A    
 %3Cimg src
@@ -2540,10 +2540,59 @@
 lt%7D%22
-/%3E
+ class=%22js-letter%22 data-index=%22$%7Bprops.index%7D%22/%3E%0A  
 %60)%0A%7D

Allow editing by tapping letter on the bag