import { createStore } from 'vuex'
import { setLocalStorageData, updateUrlStep } from '../includes/utility';

export default createStore({
	state: {
		popupVisible: {
			createTemplate: false,
			conditionsPopup: false,
			templateLibrary: false,
			importPageTemplate: false,
		},
		currentStep: 'licenseStep',
		stepMap: [ 'licenseStep', 'pluginsStep', 'modulesStep', 'finishStep' ],
		licenseList: window.wizardConfig.licenseList || [],
		compatibilityPlugins: window.wizardConfig.compatibilityPlugins || [],
	},
	getters: {
		getStepMap: state => {
			return state.stepMap;
		},

		getLicenseList: state => {
			return state.licenseList;
		},

		getCompatibilityPlugins: state => {
			return state.compatibilityPlugins;
		},

		getCompatibilityPluginSlug: state => {
			return state.compatibilityPlugins.map( ( pluginData ) => {
				return pluginData.slug;
			} );
		},

		getLicenseCompatibilityPlugins: ( state, getters ) => {
			const licenseList = getters.getLicenseList || [];
			const compat = getters.getCompatibilityPlugins || [];
			const licensePlugins = new Set();

			licenseList.forEach( licence => {
				const plugins = licence?.licenseDetails?.plugins || {};
				Object.keys(plugins).forEach(slug => licensePlugins.add(slug));
			});

			return compat.filter(plugin => {
				const slug = typeof plugin === 'string' ? plugin : plugin?.slug;
				return slug && licensePlugins.has(slug);
			});
		}
	},
	mutations: {

		updatePopupVisibleState: ( state, payload ) => {
			let popup = payload.popup,
			    visible = payload.visible;

			if ( ! state.popupVisible.hasOwnProperty( popup ) ) {
				return false;
			}

			state.popupVisible[ popup ] = visible;

		},

		updateStep: ( state, payload ) => {
			console.log(payload)
			state.currentStep = payload.step || 'licenseStep';

			updateUrlStep( payload.step );
			setLocalStorageData( 'currentStep', payload.step );
		},

		updateLicenseList: ( state, payload ) => {
			let index = state.licenseList.findIndex( ( licenseData, index ) => {
				return licenseData.licenseKey === payload.data.licenseKey;
			} );

			if ( -1 === index ) {
				return false;
			}

			state.licenseList[ index ] = payload.data;
		},

		updateNewLicense: ( state, payload ) => {
			state.licenseList[ 0 ] = payload.data;
		},

		addLicenseToList: ( state, payload ) => {
			state.licenseList = [ payload.data, ...state.licenseList ];
		},

		removeLicenseToList: ( state, payload ) => {
			let index = state.licenseList.findIndex( ( licenseData, index ) => {
				return licenseData.licenseKey === payload.key;
			} );

			if ( -1 === index ) {
				return false;
			}

			state.licenseList.splice( index, 1 );
		},

		updateCompatibilityPlugins: ( state, payload ) => {
			const slug = payload.slug || false;
			const data = payload.data || [];

			if ( ! slug ) {
				return false;
			}

			let index = state.compatibilityPlugins.findIndex( ( pluginData, index ) => {
				return pluginData.slug === slug;
			} );

			if ( -1 === index ) {
				return false;
			}

			state.compatibilityPlugins[ index ] = { ...state.compatibilityPlugins[index], ...data }
		}

	},
	actions: {
		goToNextStep: ( context, payload ) => {
			const { state, commit } = context;

			const currentIndex = state.stepMap.indexOf( state.currentStep );

			if ( currentIndex < state.stepMap.length - 1 ) {
				const nextStep = state.stepMap[ currentIndex + 1 ];

				context.commit( 'updateStep', { step: nextStep } );
			}
		},

		goToPrevStep: ( context, payload ) => {
			const { state, commit } = context;

			const currentIndex = state.stepMap.indexOf( state.currentStep );

			if ( currentIndex > 0 ) {
				const prevStep = state.stepMap[ currentIndex - 1 ];

				context.commit( 'updateStep', { step: prevStep } );
			}
		},

	},
});
