/*
	Dedicated reducer for onboarding processes (new feature guides)
	How to use this reducer:
	1. `INITIALIZE_ONBOARDING` means the user triggers on the onboarding tutorial and all the elements
		For example: No user avatar, then initialize the avatar onboarding
	2. `resolveOnboarding` means the user closed the onboarding tutorial element
		For example: User closed the avatar introduction banner on home page, then resolve the avatar onboarding, banner element
	4. `isOnboardingInitialized@reducer/helper.js` is to check if the user already triggers the onboarding or not
	5. `onboardingShow@reducer/helper.js` is to check if the user already triggers the onboarding and not yet closed the element
*/

import {
	INITIALIZE_ONBOARDING,
	SUBMIT_LOGIN_SUCCESS,
	LOGOUT_SUCCESS,
	GET_AVATAR_SUCCESS,
	HIDE_AVATAR_BADGE,
	HIDE_AVATAR_BANNER,
	HIDE_AVATAR_TUTORIAL_OVERLAY,
	HIDE_ADDPHOTO_TUTORIAL,
} from '../store/actionTypes';

const initialState = {
	username: undefined,
	avatarUrl: '',
	/*
		We are using username as key to determine if the user has undergo these onboarding processes
		We are doing this because the backend does not support storing those events
		this data lives in local storage of app
	*/
	/*
		if the username is listed in the object, that just means that the user has already undergo onboarding
	*/
	avatar: {
		banner: {}, // username as key
		badge: {},
		tutorialOverlay: {},
		initialized: {},
	},
	addPhoto: {
		overlay: {},
		initialized: {},
	},
};

const resolveOnboarding = ({
	state, feature, element, isClosed = true, // set isClosed to false to reopen the element
}) => {
	const { username } = state;
	if (username) {
		return {
			...state,
			[feature]: {
				...(state ? state[feature] : {}),
				[element]: {
					...(state && state[feature] && state[feature][element] ? state[feature][element] : {}),
					[username]: isClosed,
				},
			},
		};
	}
	return state;
};

const initializeOnboarding = ({ state, feature }) => {
	const { username } = state;
	if (username) {
		return {
			...state,
			[feature]: {
				...state[feature],
				initialized: {
					...(state[feature] ? state[feature].initialized : {}),
					[username]: true,
				},
			},
		};
	}
	return state;
};

export const onboarding = (state = initialState, { type, payload }) => {
	switch (type) {
		case SUBMIT_LOGIN_SUCCESS:
			return { ...state, username: payload.user.username };
		case LOGOUT_SUCCESS:
			return { ...state, username: undefined };
		case GET_AVATAR_SUCCESS: {
			return { ...state, avatarUrl: payload.url };
		}
		case INITIALIZE_ONBOARDING: return initializeOnboarding({ state, feature: payload.feature });
		case HIDE_AVATAR_BADGE: return resolveOnboarding({ state, feature: 'avatar', element: 'badge' });
		case HIDE_AVATAR_BANNER: return resolveOnboarding({ state, feature: 'avatar', element: 'banner' });
		case HIDE_AVATAR_TUTORIAL_OVERLAY: return resolveOnboarding({ state, feature: 'avatar', element: 'tutorialOverlay' });
		case HIDE_ADDPHOTO_TUTORIAL: return resolveOnboarding({ state, feature: 'addPhoto', element: 'overlay' });
		default: return state;
	}
};
