//configureStore.ts
import { createWrapper } from 'next-redux-wrapper';
import { createStore, compose, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import createSagaMiddleware from 'redux-saga';

import reducer from '../reducers';
import rootSaga from '../sagas';

const configureStore = () => {
  const sagaMiddleware = createSagaMiddleware();
  const middlewares = [sagaMiddleware];
  const enhancer =
    process.env.NODE_ENV === 'production'
      ? compose(applyMiddleware(...middlewares))
      : composeWithDevTools(applyMiddleware(...middlewares));
  const store: any = createStore(reducer, enhancer);
  store.sagaTask = sagaMiddleware.run(rootSaga);
  return store;
};

const wrapper = createWrapper(configureStore, {
  // debug: process.env.NODE_ENV === 'development',
  debug: false,
});

export default wrapper;

///////////////////////////////////////////////////////////////////////////
//_app.tsx
import wrapper from '../store/configureStore';

const MyApp = ({ Component, pageProps }: AppProps) => {
	return (<div></div>);
}
export default wrapper.withRedux(MyApp);

///////////////////////////////////////////////////////////////////////////
//index.ts/reducer
//import { HYDRATE } from 'next-redux-wrapper';
import user from './user';
import artist from './artist';
import { combineReducers } from 'redux';

//이전 상태, 액션 => 다음상태
const rootReducer = (state, action) => {
  switch (action.type) {
    //case HYDRATE:
      // console.log('HYDRATE', action);
      //return action.payload;
    default:
      const combinedReducer = combineReducers({
        user,
        artist,
      });
      return combinedReducer(state, action);
  }
};

export default rootReducer;
export type RootState = ReturnType<typeof rootReducer>;

//artist.ts/reducer
import produce from 'utils/produce';

export const initialState = {
  //Artist
  loadGalleryLoading: false,
  loadGalleryDone: false,
  loadGalleryError: null,

  loadGalleryData: null,
};

export const LOAD_GALLERY_REQUEST = 'LOAD_GALLERY_REQUEST';
export const LOAD_GALLERY_SUCCESS = 'LOAD_GALLERY_SUCCESS';
export const LOAD_GALLERY_FAILURE = 'LOAD_GALLERY_FAILURE';

export const loadGalleryRequestAction = (data) => ({
  type: LOAD_GALLERY_REQUEST,
  data,
});

const reducer = (state = initialState, action) =>
  produce(state, (draft) => {
    switch (action.type) {
      case LOAD_GALLERY_REQUEST:
        draft.loadGalleryLoading = true;
        draft.loadGalleryDone = false;
        draft.loadGalleryError = null;
        break;
      case LOAD_GALLERY_SUCCESS:
        draft.loadGalleryLoading = false;
        draft.loadGalleryDone = true;
        draft.loadGalleryData = action.data;
        break;
      case LOAD_GALLERY_FAILURE:
        draft.loadGalleryLoading = false;
        draft.loadGalleryError = action.error;
        break;
      default:
        break;
    }
  });

export default reducer;

//index.ts/sagas

import { all, fork } from 'redux-saga/effects';

import userSaga from './user';
import artistSaga from './artist';

export default function* rootSaga() {
  yield all([
    fork(userSaga),
    fork(artistSaga),
  ]);
}

///////////////////////////////////////////////////////////////////////////
//artistSaga.ts
import { all, fork, call, takeLatest, put } from 'redux-saga/effects';
import axios from 'axios';
import {
  LOAD_GALLERY_REQUEST,
  LOAD_GALLERY_SUCCESS,
  LOAD_GALLERY_FAILURE,
} from 'reducers/artist';

const baseUrl = process.env.API_ENDPOINT;

function loadGalleryAPI(data) {
  return axios.get(
    `${baseUrl}/pub/lecturer-galleries/${data.lecturerId}/${data.pageNo}`,
  );
}

function* loadGallery(action) {
  try {
    const result = yield call(loadGalleryAPI, action.data);
    // console.log(result);
    if (result.data.errors[0].code === '0') {
      yield put({
        type: LOAD_GALLERY_SUCCESS,
        data: result.data.result,
      });
    } else {
      yield put({
        type: LOAD_GALLERY_FAILURE,
        error: result.data.errors[0],
      });
    }
  } catch (err) {
    yield put({
      type: LOAD_GALLERY_FAILURE,
      error: err,
    });
  }
}

function* watchLoadGallery() {
  yield takeLatest(LOAD_GALLERY_REQUEST, loadGallery);
}

export default function* artistSaga() {
  yield all([fork(watchLoadGallery)]);
}