import * as types from 'app/types'
// import { session, getDefault, getDefaultInt } from 'app/session'

import { crudState, crudReducer } from 'app/api/crud.reducer'

const initialState = crudState('page', {
  editor: {
    addingTile: false,
    editingTile: false,
    currentEditTileId: 0,
    tileList: false,
    showingPopups: true,
    sidebarOnRight: true,
    cursorList: false,
    popups: {},
    pickedCursor: null,
  },
  options: {
  }
})

const reducer = crudReducer('page')

export default function pageReducer(state = initialState, action) {
  // console.log(action.type, action)
  state = reducer(state, action)
  switch (action.type) {
    case types.tile.create:
      return {
        ...state,
        show: {
          ...state.show,
          res: {
            ...state.show.res,
            tiles: state.show.res.tiles.concat(action.data.res),
          }
        }
      }

    case types.page.update:
      if (state.show.res && state.show.res.id === action.data.res.id) {
        return {
          ...state,
          show: {
            ...state.show,
            res: {
              ...action.data.res,
              tiles: state.show.res.tiles,
            }
          }
        }
      }
      return {
        ...state,
        show: {
          ...state.show,
          res: {
            ...action.data.res,
          }
        }
      }

    case types.page.update_page_tile:
      console.log(action.tile)
      return {
        ...state,
        show: {
          ...state.show,
          res: {
            ...state.show.res,
            tiles: state.show.res.tiles.map(tile => {
              if (tile.id === action.tile.id) {
                return { ...action.tile }
              } else {
                return tile
              }
            }),
          }
        }
      }

    case types.tile.destroy:
      return {
        ...state,
        show: {
          ...state.show,
          res: {
            ...state.show.res,
            tiles: state.show.res.tiles.filter(tile => tile.id !== action.data.id)
          }
        }
      }

    // add tile UI
    case types.page.show_add_tile_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: true,
          editingTile: false,
          tileList: false,
          cursorList: false,
        }
      }

    case types.page.hide_add_tile_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: false,
          cursorList: false,
        }
      }

    case types.page.toggle_add_tile_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: !state.editor.addingTile,
          editingTile: false,
          tileList: false,
          cursorList: false,
        }
      }

    // edit tile UI
    case types.page.show_edit_tile_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: false,
          editingTile: true,
          currentEditTileId: action.tile_id,
          tileList: false,
          cursorList: false,
        }
      }

    case types.page.hide_edit_tile_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          editingTile: false,
          cursorList: false,
        }
      }

    // tile list UI
    case types.page.show_tile_list:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: false,
          editingTile: false,
          tileList: true,
          cursorList: false,
        }
      }

    case types.page.hide_tile_list:
      return {
        ...state,
        editor: {
          ...state.editor,
          tileList: false,
          cursorList: false,
        }
      }

    case types.page.toggle_tile_list:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: false,
          editingTile: false,
          tileList: !state.editor.tileList,
          cursorList: false,
        }
      }

    case types.graph.toggle_edit_page_form:
      return {
        ...state,
        editor: {
          ...state.editor,
          addingTile: false,
          editingTile: false,
          tileList: false,
          cursorList: false,
        }
      }

    case types.page.toggle_cursor_list:
      return {
        ...state,
        editor: {
          ...state.editor,
          cursorList: (typeof action.visible !== undefined)
            ? action.visible : !state.editor.cursorList   
        }
      }

    case types.page.pick_cursor:
      return {
        ...state,
        editor: {
          ...state.editor,
          cursorList: false,
          pickedCursor: action.cursor,
        }
      }

    case types.page.set_tile_sort_order:
      return {
        ...state,
        show: {
          ...state.show,
          res: {
            ...state.res,
            tiles: action.tiles,
          }
        }
      }

    case types.page.toggle_popups:
      return {
        ...state,
        editor: {
          ...state.editor,
          showingPopups: !state.editor.showingPopups,
        }
      }

    case types.page.load_popups:
      return {
        ...state,
        editor: {
          ...state.editor,
          popups: action.popups,
        }
      }

    case types.page.toggle_sidebar_side:
      return {
        ...state,
        editor: {
          ...state.editor,
          sidebarOnRight: !state.editor.sidebarOnRight,
        }
      }

    default:
      return state
  }
}