import $ from 'jquery'

const modalStores = () => {
  init()
}

const init = () => {
  $('.js-modal').click(function (e) {
    e.preventDefault()
    var target = $(this).data('target')
    if ($(target).hasClass('active')) {
      $(target).removeClass('active')
      $('body').removeClass('has-modal')
    } else {
      $(target).addClass('active')
      $('body').addClass('has-modal')
    }
    $('.modal_step').removeClass('active')
    $('.modal_step_default').addClass('active')
  })

  // modal_store
  //
  $('#selectCountry').change(function () {
    // console.log('change', $(this).val())
    $('#storeList').find('a').removeClass('open')
    $('#storeList')
      .find('.' + $(this).val())
      .addClass('open')
  })
  $('#selectCountry').trigger('change')

  // modal_iterations
  //
  $('#iterationList0').addClass('open')
  $('#iterationImg0').addClass('open')
  $('#selectIterations').change(function (index, el) {
    $('#modal_iterations').find('.iteration_list').removeClass('open')
    $('#modal_iterations').find('.iteration_img').removeClass('open')
    $('#iterationList' + $(this).val()).addClass('open')
    $('#iterationImg' + $(this).val()).addClass('open')
  })
  $('#selectIterations').trigger('change')

  $(document).keyup(function (e) {
    if ($('.modal').hasClass('active')) {
      if (e.keyCode === 27) {
        // esc
        closeAllModals()
      }
    }
  })
  $('.js-step').click(function () {
    var target = $(this).data('target')
    $('.modal_step').removeClass('active')
    $(target).addClass('active')
  })
}

const closeAllModals = () => {
  $('.modal').removeClass('active')
  $('body').removeClass('has-modal')
}

export { modalStores }
