/* Third party import */
import { createAction, handleActions } from 'redux-actions';
import { ofType } from 'redux-observable';
import {
  catchError,
  mergeMap,
  switchMap,
  takeUntil,
  map,
} from 'rxjs/operators';
import {
  from,
  of,
  iif,
} from 'rxjs';
/* Relative webpack imports */
import { getImages } from 'api/establishments';
import { getProductImages } from 'api/products';
/* Relative imports */
import {
  closeLoadingBar,
  showLoadingBar,
  showMessage,
} from './common';

const FETCH_IMAGES_SUCCEEDED = 'images/FETCH_IMAGES_SUCCEEDED';
const FETCH_IMAGES_STARTED = 'images/FETCH_IMAGES_STARTED';
const FETCH_IMAGES_FAILED = 'images/FETCH_IMAGES_FAILED';
const FETCH_PRODUCT_IMAGES_SUCCEEDED = 'images/FETCH_PRODUCT_IMAGES_SUCCEEDED';
const FETCH_PRODUCT_IMAGES_STARTED = 'images/FETCH_PRODUCT_IMAGES_STARTED';
const FETCH_PRODUCT_IMAGES_FAILED = 'images/FETCH_PRODUCT_IMAGES_FAILED';
const SHOW_IMAGE_GALLERY = 'images/SHOW_IMAGE_GALLERY';
const CLOSE_IMAGE_GALLERY = 'images/CLOSE_IMAGE_GALLERY';
const SHOW_PRODUCT_IMAGE_GALLERY = 'images/SHOW_PRODUCT_IMAGE_GALLERY';
const CLOSE_PRODUCT_IMAGE_GALLERY = 'images/CLOSE_PRODUCT_IMAGE_GALLERY';

export const showImageGallery = createAction(SHOW_IMAGE_GALLERY);
export const closeImageGallery = createAction(CLOSE_IMAGE_GALLERY);
export const showProductImageGallery = createAction(SHOW_PRODUCT_IMAGE_GALLERY);
export const closeProductImageGallery = createAction(CLOSE_PRODUCT_IMAGE_GALLERY);

export const fetchImagesSucceeded = createAction(
  FETCH_IMAGES_SUCCEEDED,
  images => ({ images }),
);
export const fetchImagesStarted = createAction(
  FETCH_IMAGES_STARTED,
  id => ({ id }),
);
export const fetchImagesFailed = createAction(
  FETCH_IMAGES_FAILED,
  error => ({ error }),
);

export const fetchProductImagesSucceeded = createAction(
  FETCH_PRODUCT_IMAGES_SUCCEEDED,
  productImages => ({ productImages }),
);
export const fetchProductImagesStarted = createAction(
  FETCH_PRODUCT_IMAGES_STARTED,
  (id, isImageGallery) => ({ id, isImageGallery }),
);
export const fetchProductImagesFailed = createAction(
  FETCH_PRODUCT_IMAGES_FAILED,
  error => ({ error }),
);


export function fetchImages(id) {
  return (dispatch) => {
    dispatch(showLoadingBar());
    dispatch(fetchImagesStarted(id));
  };
}

export const fetchImagesEpic = action$ =>
  action$.pipe(
    ofType(fetchImagesStarted),
    switchMap(action =>
      from(getImages(action.payload.id)).pipe(
        mergeMap(response => of(
          closeLoadingBar(),
          fetchImagesSucceeded(response.data),
        )),
        takeUntil(action$.pipe(
          ofType(fetchImagesSucceeded),
        )),
        catchError(error => of(
          fetchImagesFailed(error.message),
          closeLoadingBar(),
        )),
      )),
  );

// export function fetchProductImages(id, isImageGallery) {
//   return (dispatch) => {
//     dispatch(showLoadingBar());
//     getProductImages(id)
//       .then((response) => {
//         dispatch(closeLoadingBar());
//         dispatch(fetchProductImagesSucceeded(response.data));
//         if (response.data.length === 0 && isImageGallery === true) {
//           dispatch(showMessage(true, 'backoffice:product.noImageFound'));
//         } else if (isImageGallery) { dispatch(showProductImageGallery()); }
//       })
//       .catch((error) => {
//         dispatch(fetchProductImagesFailed(error.message));
//         dispatch(closeLoadingBar());
//       });
//   };
// }
export function fetchProductImages(id, isImageGallery) {
  return (dispatch) => {
    dispatch(showLoadingBar());
    dispatch(fetchProductImagesStarted(id, isImageGallery));
  };
}

export const fetchProductImagesEpic = action$ =>
  action$.pipe(
    ofType(fetchProductImagesStarted),
    switchMap(action =>
      from(getProductImages(Number(action.payload.id))).pipe(
        mergeMap(response =>
          iif(
            () => action.payload.isImageGallery,
            iif(
              () => response.data.length === 0,
              of(
                closeLoadingBar(),
                fetchProductImagesSucceeded(response.data),
                showMessage(true, 'backoffice:product.noImageFound'),
              ),
              of(
                closeLoadingBar(),
                fetchProductImagesSucceeded(response.data),
                showProductImageGallery(),
              ),
            ),
            of(
              closeLoadingBar(),
              fetchProductImagesSucceeded(response.data),
            ),
          )),
        takeUntil(action$.pipe(
          ofType(fetchProductImagesStarted),
        )),
        catchError(error => of(
          fetchProductImagesFailed(error.message),
          closeLoadingBar(),
        )),
      )),
  );

const initialState = {
  images: [],
  productImages: [],
  openImageGallery: false,
  openProductImageGallery: false,
};

const reducer = handleActions({
  [fetchImagesStarted]: state => ({
    ...state,
    images: [],
  }),
  [fetchImagesSucceeded]: (state, action) => ({
    ...state,
    images: action.payload.images || [],
  }),
  [fetchImagesFailed]: (state, action) => ({
    ...state,
    error: action.payload.error,
  }),
  [fetchProductImagesStarted]: state => ({
    ...state,
    productImages: [],
  }),
  [fetchProductImagesSucceeded]: (state, action) => ({
    ...state,
    productImages: action.payload.productImages || [],
  }),
  [fetchProductImagesFailed]: (state, action) => ({
    ...state,
    error: action.payload.error,
  }),
  [showImageGallery]: state => ({
    ...state,
    openImageGallery: true,
  }),
  [closeImageGallery]: state => ({
    ...state,
    openImageGallery: false,
  }),
  [showProductImageGallery]: state => ({
    ...state,
    openProductImageGallery: true,
  }),
  [closeProductImageGallery]: state => ({
    ...state,
    openProductImageGallery: false,
    productImages: [],
  }),
}, initialState);

export default reducer;