import * as types from '../../types'
import { store } from '../../store'
import actions from '../../actions'
import { default as debounce } from 'lodash.debounce'

export const showAddTileForm = () => dispatch => {
  dispatch({ type: types.page.show_add_tile_form })
}

export const hideAddTileForm = () => dispatch => {
  dispatch({ type: types.page.hide_add_tile_form })
}

export const toggleAddTileForm = () => dispatch => {
  dispatch({ type: types.page.toggle_add_tile_form })
}

export const showEditTileForm = tile_id => dispatch => {
  dispatch({ type: types.page.show_edit_tile_form, tile_id })
}

export const hideEditTileForm = () => dispatch => {
  dispatch({ type: types.page.hide_edit_tile_form })
}

export const toggleEditTileForm = () => dispatch => {
  dispatch({ type: types.page.toggle_edit_tile_form })
}

export const showTileList = () => dispatch => {
  dispatch({ type: types.page.show_tile_list })
}

export const hideTileList = () => dispatch => {
  dispatch({ type: types.page.hide_tile_list })
}

export const toggleTileList = () => dispatch => {
  dispatch({ type: types.page.toggle_tile_list })
}

export const updatePageTile = tile => dispatch => {
  dispatch({ type: types.page.update_page_tile, tile })
}

export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => (
  new Promise((resolve, reject) => {
    showGraphIfUnloaded({ graph_name })(dispatch)
    .then(graph => (
      actions.page.show('name/'  + graph_name + '/' + page_name)
      .then(resolve)
      .catch(reject)
    ))
    .catch(reject)
  })
)

export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
  new Promise((resolve, reject) => {
    const { res: graph } = store.getState().graph.show
    if (graph && graph.path === graph_name) {
      return resolve(graph)
    }
    actions.graph.show('name/'  + graph_name)
    .then(resolve)
    .catch(reject)
  })
)

export const setTileSortOrder = (tiles) => dispatch => {
  dispatch({ type: types.page.set_tile_sort_order, tiles })
  updateTileSortOrder(tiles)
}

export const isSameTileOrder = (newTiles, oldTiles) => {
  for (let i = 0; i < newTiles.length; i++) {
    if (newTiles[i].id !== oldTiles[i].id) {
      return false
    }
  }
  return true
}

export const updateTileSortOrder = debounce((tiles) => {
  let oldTiles = store.getState().page.show.res.tiles
  if (isSameTileOrder(tiles, oldTiles)) return
  console.log('update tile sort order')
  const newOrder = tiles.map((tile, i) => ({ id: tile.id, sort_order: i }))
  console.log(newOrder)
}, 1000)