import $ from 'jquery'
import _ from 'lodash'
import URI from 'urijs'
import humps from 'humps'
import { subscribeChannel } from '../../socket'
import { connectElements } from '../../lib/redux_helpers.js'
import { createAsyncLoadStore } from '../../lib/async_listing_load'

export const initialState = {
  addressHash: null,
  isSearch: false
}

export function reducer (state, action) {
  switch (action.type) {
    case 'PAGE_LOAD':
    case 'ELEMENTS_LOAD': {
      return Object.assign({}, state, _.omit(action, 'type'))
    }
    case 'START_SEARCH': {
      return Object.assign({}, state, {pagesStack: [], isSearch: true})
    }
    default:
      return state
  }
}

const elements = {
  '[data-search-field]': {
    render ($el, state) {
      $el
    }
  },
  '[data-search-button]': {
    render ($el, state) {
      $el
    }
  },
  '[data-cancel-search-button]': {
    render ($el, state) {
      if (!state.isSearch) {
        return $el.hide()
      }

      return $el.show()
    }
  }
}

if ($('[data-page="address-logs"]').length) {
  const store = createAsyncLoadStore(reducer, initialState, 'dataset.identifierHash')
  const addressHash = $('[data-page="address-details"]')[0].dataset.pageAddressHash
  const $element = $('[data-async-listing]')


  connectElements({ store, elements })

  store.dispatch({
    type: 'PAGE_LOAD',
    addressHash: addressHash})

  function loadSearchItems () {
    var topic = $('[data-search-field]').val();
    var path = "/search_logs?topic=" + topic + "&address_id=" + store.getState().addressHash
    store.dispatch({type: 'START_REQUEST'})
    $.getJSON(path, {type: 'JSON'})
      .done(response => store.dispatch(Object.assign({type: 'ITEMS_FETCHED'}, humps.camelizeKeys(response))))
      .fail(() => store.dispatch({type: 'REQUEST_ERROR'}))
      .always(() => store.dispatch({type: 'FINISH_REQUEST'}))
  }


  $element.on('click', '[data-search-button]', (event) => {
    store.dispatch({
      type: 'START_SEARCH',
      addressHash: addressHash})
    loadSearchItems()
  })

  $element.on('click', '[data-cancel-search-button]', (event) => {
    console.log('click')
    window.location.replace(window.location.href.split('?')[0])
  })
}