<template>
	<mainHeader/>
	<div :class="bodyClasses">
		<component :is="currentStep"></component>
	</div>
	<mainFooter/>
</template>

<script>
import mainHeader from './components/mainHeader.vue';
import mainFooter from './components/mainFooter.vue';
import licenseStep from './components/licenseStep.vue';
import pluginsStep from './components/pluginsStep.vue';
import modulesStep from './components/modulesStep.vue';
import finishStep from './components/finishStep.vue';

import { getLocalStorageData } from './includes/utility';
import { jsPlumb } from "jsplumb";
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default {
	name: 'App',
	components: {
		mainHeader,
		mainFooter,
		licenseStep,
		pluginsStep,
		modulesStep,
		finishStep
	},
	data() {
		return {
			config: window.wizardConfig,
			progressState: true,
			debounceInterval: null,
		}
	},
	mounted() {
		/*let savedCurrentStep = getLocalStorageData( 'currentStep' );

		if ( savedCurrentStep ) {
			this.$store.commit( 'updateStep', {
				step: 'licenseStep' === savedCurrentStep ? 'licenseStep' : savedCurrentStep
			} );
		}
*/
		const urlParams = new URL( window.location.href ).searchParams,
			currentStep = urlParams.get( 'current-step' ) || 'licenseStep';

		if ( currentStep ) {
			this.$store.commit( 'updateStep', {
				step: currentStep
			} );
		}
	},
	watch: {
		/*pageTemplateList: {
			deep: true,
			handler: function( current ) {

			}
		},*/
	},
	computed: {
		bodyClasses() {
			return [
				'divi-views-wizard__body',
				this.currentStep,
			];
		},
		currentStep() {
			return this.$store.state.currentStep;
		},
		isLoaderVisible() {
			//return this.$store.state.updatePageTemplatesProgressState;
			return false;
		}
	},
	methods: {
	}
}
</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap');

.divi-views-wizard {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	min-height: calc(100vh - 80px);
	margin-top: 20px;
	margin-right: 20px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 1.5;
	box-shadow: 0px 3px 5px 0px #1E293B33;
	border-radius: 16px;
	overflow: hidden;
	background-color: white;
	color: var(--secondary-text-color);
	//scroll-behavior: smooth;

	h1, h2, h3, h4, h5, h6 {
		color: var(--primary-text-color);
		margin: 0 0 10px 0;
	}

	p {
		color: var(--secondary-text-color);
	}

	--primary-text-color: #1E293B;
	--secondary-text-color: #64748B;
	--border-color: #94A3B8;
	--link-color: #0D88BF;
	--success-color: #0CA64B;
	--warning-color: #EAB413;
	--error-color: #E93561;

	& > .divi-views-wizard__spinner-loader {
		position: fixed;
		width: 32px;
		height: 32px;
		background-color: white;
		border: 2px solid #007CBA;
		border-radius: 50%;
		top: 50px;
		right: 20px;
		z-index: 9998;
	}

	&__body {
		padding: 40px;
		flex: 1 1 auto;
	}

	&__step-controls {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		gap: 20px;
		margin-top: 40px;
	}

	.cx-vui-button {
		border-radius: 8px;
		box-shadow: none;

		.cx-vui-button__content {
			gap: 8px;
		}

		.svg-icon {
			width: 20px;
			height: 20px;
		}

		&--size-default {
			padding: 12px 20px;
		}

		&--style-link-accent {
			background-color: transparent;

			&:hover {
				color: #066EA2;
				background-color: transparent;
			}
		}

		&[disabled=true] {
			background-color: rgba(203, 213, 225, 1);
			opacity: 1;
		}
	}

	.cx-vui-input {
		border: 1px solid var(--border-color);
		background-color: transparent;
		border-radius: 8px;
	}

	.cx-vui-switcher {

		&__panel {
			height: 20px;
			border-radius: 10px;
			background: #94A3B8;
		}

		&__trigger {
			left: 1px;
		}

		&--on {

			.cx-vui-switcher__panel {
				background: #007CBA;
			}
			.cx-vui-switcher__trigger {
				left: calc(100% - 19px);
				background: white;
			}
		}
	}
}

.svg-icon {
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
		margin: 0 !important;
	}
}

.capitalize-format {
	text-transform: capitalize;
}

.panel {
	border-radius: 4px;
	padding: 16px;
	background-color: white;
	box-shadow: 0px 2px 6px rgb(35 40 45 / 7%);
}

.progress-state {
	opacity: 0.5;
	pointer-events: none;
}

.progress-state-alt {
	//pointer-events: none;
}

.v-popper__popper {
	.v-popper__inner {
		font-size: 12px;
	}
}

.Toastify {
	--toastify-icon-color-info: #0073aa;
	--toastify-icon-color-success: #46B450;
	--toastify-icon-color-warning: #EAB413;
	--toastify-icon-color-error: #D6336C;

	&__toast-container {
		&--top-right {
			top: 3em;
		}
	}
}

</style>
