import {
  createAsyncThunk,
  createEntityAdapter,
  createSlice,
} from '@reduxjs/toolkit';
import api from '../../api';

export const fetchCameras = createAsyncThunk(
  'cameras/fetchCameras',
  async () => {
    return api.cameras.getCameras();
  },
);

const cameraAdapter = createEntityAdapter();

const initialState = cameraAdapter.getInitialState({
  status: 'idle',
  error: null,
});

const camerasSlice = createSlice({
  name: 'cameras',
  initialState,
  reducers: {},
  extraReducers(builder) {
    builder
      .addCase(fetchCameras.pending, state => {
        state.status = 'loading';
      })
      .addCase(fetchCameras.fulfilled, (state, action) => {
        state.status = 'succeeded';
        console.log(action.payload);
        // state.cameras = state.cameras.concat(action.payload.results);
        cameraAdapter.upsertMany(state, action.payload.results);
      })
      .addCase(fetchCameras.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.payload.message;
      });
  },
});

export default camerasSlice.reducer;

// export const selectAllCameras = (state) => state.cameras.cameras;
export const {selectAll: selectAllCameras, selectById: selectCameraById} =
  cameraAdapter.getSelectors(state => state.cameras);