import { PayloadAction, createSlice } from '@reduxjs/toolkit'
import { initializeConfig } from 'domains/config/actions'
import { setVisibility } from 'domains/visibility/actions'
import { visibilityStates } from 'domains/visibility/constants'
import type {
  VisibilityState,
  VisibilityActionArgs,
} from 'domains/visibility/visibility.types'

const initialState: VisibilityState = {
  visibility: visibilityStates.initialize,
  showInlineView: false,
  showPreChat: true,
  showContinueChat: true,
  setInputFocus: false,
}

export const visibilitySlice = createSlice({
  name: 'visibility',
  initialState,
  reducers: {
    setShowInlineView: (state) => {
      state.showInlineView = true
    },
  },
  extraReducers: (builder) => {
    builder
      .addCase(
        setVisibility.fulfilled,
        (
          state,
          {
            payload: {
              visibility,
              setInputFocus,
              showPreChat,
              showContinueChat,
            },
          }: PayloadAction<VisibilityActionArgs>,
        ) => {
          if (visibility) {
            state.visibility = visibility
            state.setInputFocus = Boolean(setInputFocus)
          }

          if (typeof showPreChat !== 'undefined') {
            state.showPreChat = showPreChat
          }

          if (typeof showContinueChat !== 'undefined') {
            state.showContinueChat = showContinueChat
          }
        },
      )
      .addCase(initializeConfig.fulfilled, (state, { payload }) => {
        // We only want to (always) show the inlineView when connectWhenInView is disabled
        if (!payload.connectWhenInView) {
          state.showInlineView = !payload.connectWhenInView
        }
      })
  },
})

export const { setShowInlineView } = visibilitySlice.actions

export default visibilitySlice.reducer