<template>
	<div class="divi-views-wizard__step modules-step">
		<spinnerLoader :progressText="installProgressText" v-if="installInProgress" />
		<div class="modules-step__content">
			<div class="divi-views-wizard__modules">
				<div
					class="divi-views-wizard__module"
					v-for="moduleData in internalModules"
					:key="moduleData.value"
				>
					<div class="divi-views-wizard__module-content">
						<h4>{{ moduleData.label }}</h4>
						<p v-html="moduleData.details_alt ? moduleData.details_alt : moduleData.details"></p>
					</div>
					<div class="divi-views-wizard__module-check">
						<cx-vui-switcher
							:prevent-wrap="true"
							:value="isActiveModule( moduleData.value )"
							@input="checkHandler( $event, moduleData.value )"
						></cx-vui-switcher>
					</div>
				</div>
			</div>
			<div class="divi-views-wizard__step-controls">
				<cx-vui-button
					button-style="accent-border"
					class="cx-vui-button--style-accent"
					size="default"
					@on-click="prevStepHandler"
				>
					<template v-slot:label>
						<span class="svg-icon">
							<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z" fill="#0D88BF"/>
							</svg>
						</span>
						<span>Back</span>
					</template>
				</cx-vui-button>

				<cx-vui-button
					button-style="default"
					class="cx-vui-button--style-accent"
					size="default"
					:disabled="!isNextStep"
					@on-click="stepAction"
				>
					<template v-slot:label>
						<span v-if="isNeedSaved">Install selected</span>
						<span v-if="!isNeedSaved">Next</span>
						<span class="svg-icon">
							<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M8.3332 5L7.1582 6.175L10.9749 10L7.1582 13.825L8.3332 15L13.3332 10L8.3332 5Z" fill="white"/>
							</svg>
						</span>
					</template>
				</cx-vui-button>
			</div>
		</div>
		<div class="modules-step__sidebar">

		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import spinnerLoader from './spinnerLoader.vue';
import { toast } from "vue3-toastify";

export default {
	name: 'modulesStep',
	components: {
		spinnerLoader
	},
	data() {
		return {
			installProgressText: '',
			internalModules: window.wizardConfig.internalModules,
			externalModules: window.wizardConfig.externalModules,
			defaultActiveModules: window.wizardConfig.activeModules,
			activeModules: [ ...window.wizardConfig.activeModules ],
			savingProgress: false
		}
	},
	computed: {
		isNextStep() {
			return true;
		},
		isNeedSaved() {
			return ! this.haveSameItems( this.activeModules, this.defaultActiveModules );
		},
		licenseCompatibilityPlugins() {
			return this.$store.getters.getLicenseCompatibilityPlugins;
		},
		licensePluginSlug() {
			return this.licenseCompatibilityPlugins.map( ( pluginData ) => {
				return pluginData.slug;
			} );
		},
	},
	methods: {
		stepAction() {
			if ( this.isNeedSaved ) {
				this.saveModules();
			} else {
				this.nextStepHandler();
			}
		},
		nextStepHandler() {
			this.$store.commit( 'updateStep', { step: 'finishStep' } );
		},
		prevStepHandler() {
			this.$store.commit( 'updateStep', { step: 'pluginsStep' } );
		},
		isActiveModule( slug ) {
			const i = this.activeModules.indexOf( slug );

			return i === -1 ? false : true;
		},
		checkHandler( $event, slug ) {

			if ( ! slug ) return;

			const i = this.activeModules.indexOf( slug );

			if ( i === -1 ) {
				this.activeModules.push( slug );
			} else {
				this.activeModules.splice(i , 1 );
			}
		},
		haveSameItems( arr1, arr2 ) {

			if ( arr1.length !== arr2.length ) {
				return false;
			}

			const a1 = [ ...arr1 ].sort();
			const a2 = [ ...arr2 ].sort();

			return a1.every( ( val, i ) => val === a2[ i ] );
		},

		saveModules: function() {
			const self = this;

			self.savingProgress = true;

			jQuery.ajax({
				url: window.ajaxurl,
				type: 'POST',
				dataType: 'json',
				data: {
					action: 'jet_engine_save_modules',
					modules: self.activeModules,
					_nonce: window.wizardConfig.jetEngineNonce,
				},
			}).done( function( response ) {
				self.savingProgress = false;

				console.log(response)

				if ( response.success ) {

					toast.success( 'Modules has been activated' );
					self.defaultActiveModules = self.activeModules;
				} else {

				}

			} )

		},
	}
}
</script>

<style lang="scss">

.divi-views-wizard {
	&__modules {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: 1fr;
		grid-column-gap: 80px;
		grid-row-gap: 20px;
	}

	&__module {
		display: flex;
		justify-content: start;
		align-items: start;
		gap: 20px
	}

}

.modules-step {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	gap: 16px;

	&__content {
		flex: 1 1 auto;
		max-width: 840px;
	}

	&__sidebar {
		overflow: hidden;
		border-radius: 20px;
	}
}

</style>

