import { createSlice, PayloadAction } from '@reduxjs/toolkit'
import { RootState } from '../../app/store'
import { VirtualBackgroundItem, VirtualBackgroundModel } from './models'
import { VirtualBackgroundType } from '@zocks-communications/client-sdk-js'

const initialState: VirtualBackgroundModel = {
  currentVirtualBackground: null,
  availableVirtualBackgrounds: [{ type: VirtualBackgroundType.BLUR }],
}

export const virtualBackgroundSlice = createSlice({
  name: 'virtualBackground',
  initialState,
  reducers: {
    setAvailableBackgrounds: (state, action: PayloadAction<VirtualBackgroundItem[]>) => {
      state.availableVirtualBackgrounds = action.payload
    },
    setCurrentVirtualBackground: (state, action: PayloadAction<VirtualBackgroundItem>) => {
      state.currentVirtualBackground = action.payload
    },

    clearCurrentVirtualBackground: (state) => {
      state.currentVirtualBackground = null
    },
  },
})

export const { setAvailableBackgrounds, setCurrentVirtualBackground, clearCurrentVirtualBackground } =
  virtualBackgroundSlice.actions

export const selectCurrentVirtualBackground = (state: RootState) => state.virtualBackground.currentVirtualBackground
export const selectAvailableVirtualBackgrounds = (state: RootState) =>
  state.virtualBackground.availableVirtualBackgrounds
export default virtualBackgroundSlice.reducer
