import { createSlice, PayloadAction } from '@reduxjs/toolkit'

export interface ViewState {
  id: string
  layout: string
  label: string
  elements: { [key: string]: string } // { "attr.globalId": 'ReactComponentName'}
  position: number
}

const defaultViewState: ViewState = {
  id: '',
  layout: 'horizontal_line',
  label: 'Cards',
  elements: {},
  position: 1,
}

const initialState: ViewState[] = []

export const viewsSlice = createSlice({
  name: 'views',
  initialState,
  reducers: {
    addView: (state, action: PayloadAction<ViewState>) => {
      state.push({ ...defaultViewState, ...action.payload })
      return state
    },

    updateView: (state, action: PayloadAction<Partial<ViewState>>) => {
      const index = state.findIndex(({ id }) => id === action.payload.id)
      state[index] = { ...state[index], ...action.payload }
      return state
    },

    removeView: (state, action: PayloadAction<Pick<ViewState, 'id'>>) => {
      return state.filter(({ id }) => id !== action.payload.id)
    },
  },
})

export const { addView, updateView, removeView } = viewsSlice.actions
export default viewsSlice.reducer