import { createSlice, configureStore } from '@reduxjs/toolkit';
import { ClipMetadata, MetadataState } from './types';

const initialState: MetadataState = {
  collections: [],
};
const metadataSlice = createSlice({
  name: 'metadata',
  initialState,
  reducers: {
    setAllData(state, action) {
      state.collections = action.payload.collections;
    },
    setCollections(state, action) {
      const { collection, newMetadata } = action.payload;
      const index = state.collections.findIndex(
        (col) => col.name === collection,
      );
      if (index !== -1) {
        state.collections[index] = newMetadata;
      }
    },
    addCollection(state, action) {
      const name = action.payload;
      if (!state.collections.find((col) => col.name === name)) {
        state.collections.push({ name, id: Date.now(), clips: [] });
      }
    },
    editClip(state, action) {
      const { collection, clip } = action.payload;
      const collectionState = state.collections.find(
        (col) => col.name === collection,
      );
      // console.log('Editing clip in collection:', collection, clip);
      if (collectionState) {
        const index = collectionState.clips.findIndex(
          (c) => c.filename === clip.filename,
        );
        if (index !== -1) {
          collectionState.clips[index] = clip;
        }
      }
    },
    deleteClip(state, action) {
      const { collection, clip } = action.payload;
      const collectionState = state.collections.find(
        (col) => col.name === collection,
      );
      if (collectionState) {
        collectionState.clips = collectionState.clips.filter(
          (c) => c.filename !== clip.filename,
        );
      }
    },
    moveClip(state, action) {
      const { sourceCollection, targetCollection, clip } = action.payload;
      const sourceState = state.collections.find(
        (col) => col.name === sourceCollection,
      );
      const targetState = state.collections.find(
        (col) => col.name === targetCollection,
      );
      if (sourceState && targetState) {
        sourceState.clips = sourceState.clips.filter(
          (c) => c.filename !== clip.filename,
        );
        targetState.clips.push(clip);
      }
    },
    addNewClip(state, action) {
      const { clip } = action.payload;
      state.collections.forEach((collection) => {
        if (collection.name === 'Uncategorized') {
          collection.clips.push(clip);
        }
      });
    },
  },
});

export const store = configureStore({
  reducer: metadataSlice.reducer,
});

// Can still subscribe to the store
// store.subscribe(() => console.log(store.getState()));

// Get the type of our store variable
export type AppStore = typeof store;
// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<AppStore['getState']>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = AppStore['dispatch'];

export const { setCollections, addNewClip, addCollection } =
  metadataSlice.actions;
export default metadataSlice.reducer;