import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import APIs from '@src/api/APIs';
import { ICollection, IFilter, INFT } from 'metarare';

type ExploreState = {
  isExploreListLoaded: boolean;
  list: INFT[];
  collectionList: ICollection[];
  hint: string[]
}

const exploreState: ExploreState = {
  isExploreListLoaded: true,
  list: [],
  collectionList: [],
  hint: []
};

export const fetchExploreHome = createAsyncThunk<Promise<any>, IFilter>(
  'explore/fetchExploreHome',
  async (filter, thunkAPI) => {
    try {
      const response = await APIs.fetchExploreHome(filter);
      return response;
    } catch (err) {
      return thunkAPI.rejectWithValue('Something went wrong.');
    }
  }
);

export const fetchExploreSearch = createAsyncThunk<Promise<any>, IFilter>(
  'explore/fetchExploreSearch',
  async (filter, thunkAPI) => {
    try {
      const response = await APIs.fetchExploreSearch(filter);
      return response;
    } catch (err) {
      return thunkAPI.rejectWithValue('Something went wrong.');
    }
  }
);

export const fetchExploreHint = createAsyncThunk<Promise<any>, IFilter>(
  'explore/fetchExploreHint',
  async (filter, thunkAPI) => {
    try {
      const response = await APIs.fetchExploreHint(filter);
      return response;
    } catch (err) {
      return thunkAPI.rejectWithValue('Something went wrong.');
    }
  }
);


export const fetchExploreKeyword = createAsyncThunk<Promise<any>, string>(
  'explore/fetchExploreKeyword',
  async (collectionName, thunkAPI) => {
    try {
      const response = await APIs.fetchExploreKeyword(collectionName);
      return response;
    } catch (err) {
      return thunkAPI.rejectWithValue('Something went wrong.');
    }
  }
);

export const slice = createSlice({
  name: 'explore',
  initialState: exploreState,
  reducers: {
    resetExploreHome: (state: ExploreState) => {
      state.list = [];
    }
  },
  extraReducers: {
    [fetchExploreHome.pending.type]: (state: ExploreState, action) => {
      state.isExploreListLoaded = false;
    },
    [fetchExploreHome.fulfilled.type]: (state: ExploreState, action) => {
      const { payload } = action;

      state.list = [
        ...state.list,
        ...payload
      ];
      state.isExploreListLoaded = true;
    },
    [fetchExploreSearch.pending.type]: (state: ExploreState, action) => {
      state.isExploreListLoaded = false;
    },
    [fetchExploreSearch.fulfilled.type]: (state: ExploreState, action) => {
      const { payload } = action;

      state.list = [
        ...state.list,
        ...payload.Result
      ];
      state.isExploreListLoaded = true;
    },
    [fetchExploreHint.pending.type]: (state: ExploreState, action) => {
      state.isExploreListLoaded = false;
    },
    [fetchExploreHint.fulfilled.type]: (state: ExploreState, action) => {
      const { payload } = action;

      state.hint = payload;
      state.isExploreListLoaded = true;
    },

    [fetchExploreKeyword.fulfilled.type]: (state: ExploreState, action) => {
      const { payload } = action;

      state.collectionList = payload;
    },
  },
});

export const {
  resetExploreHome
} = slice.actions;

const ExploreReducer = slice.reducer;
export default ExploreReducer;
