import { createSlice } from '@reduxjs/toolkit';
import type { AlertColor } from '@mui/material/Alert/Alert';
import type { RootState } from '../store';

export interface UIState {
  snackbarOpen: boolean;
  message: string;
  severity?: AlertColor;
  dialogOpen: boolean;
}

const initialState: UIState = {
  snackbarOpen: false,
  message: '',
  dialogOpen: false,
};

export const uiSlice = createSlice({
  name: 'ui',
  initialState,
  reducers: {
    showSnackbar: (state, action) => {
      state.snackbarOpen = true;
      state.message = action.payload.message;
      state.severity = action.payload.severity;
    },
    hideSnackbar: (state) => {
      state.snackbarOpen = false;
    },
    showDialog: (state) => {
      state.dialogOpen = true;
    },
    hideDialog: (state) => {
      state.dialogOpen = false;
    },
  },
});

export const { showSnackbar, hideSnackbar, showDialog, hideDialog } =
  uiSlice.actions;
export const selectUIState = (state: RootState) => state.ui;
export default uiSlice.reducer;