<template>
	<div class="divi-views-wizard__step license-step">
		<div class="license-step__content">
			<h2>Welcome to Crocoblock</h2>
			<p>The Wizard will help you install Crocoblock dynamic features to Divi for further use in the Builder. To proceed, activate the license key and run the Wizard.</p>
			<div class="divi-views-wizard__license-list">
				<licenseItem
					v-for="licenseData in licenseList"
					:key="licenseData.licenseKey"
					:licenseData="licenseData"
				></licenseItem>
			</div>
			<div :class="[ 'divi-views-wizard__notice', isNoticeType ]" v-if="isNoticeVisible">
				<div class="divi-views-wizard__notice-icon">
					<svg v-if="'info-type' === isNoticeType" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M10.0001 18.3334C5.39758 18.3334 1.66675 14.6026 1.66675 10.0001C1.66675 5.39758 5.39758 1.66675 10.0001 1.66675C14.6026 1.66675 18.3334 5.39758 18.3334 10.0001C18.3334 14.6026 14.6026 18.3334 10.0001 18.3334ZM9.16675 9.16675V14.1667H10.8334V9.16675H9.16675ZM9.16675 5.83342V7.50008H10.8334V5.83342H9.16675Z" fill="#0D88BF"/>
					</svg>
					<svg v-if="'error-type' === isNoticeType" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M10.0001 18.3334C5.39758 18.3334 1.66675 14.6026 1.66675 10.0001C1.66675 5.39758 5.39758 1.66675 10.0001 1.66675C14.6026 1.66675 18.3334 5.39758 18.3334 10.0001C18.3334 14.6026 14.6026 18.3334 10.0001 18.3334ZM10.0001 8.82175L7.64341 6.46425L6.46425 7.64341L8.82175 10.0001L6.46425 12.3567L7.64341 13.5359L10.0001 11.1784L12.3567 13.5359L13.5359 12.3567L11.1784 10.0001L13.5359 7.64341L12.3567 6.46425L10.0001 8.82175Z" fill="#E93561"/>
					</svg>
				</div>
				<div v-if="'info-type' === isNoticeType" class="divi-views-wizard__notice-content">
					<div>This license includes a Divi-compatible JetPlugin({{ licenseCompatibilityPluginNames }}). Try adding more dynamic JetPlugins({{moreCompatibilityPluginsNames}}) to cover advanced use cases and create super-powerful filterable websites.</div>
					<div>You can <a :href="upgradeLink" target="_blank">upgrade your current license</a> or <a :href="config.pricingLink" target="_blank">get a better one</a> to access the plugin.</div>
				</div>
				<div v-if="'error-type' === isNoticeType" class="divi-views-wizard__notice-content">
					<div>The license you provided doesn’t include JetPlugins compatible with Divi, such as JetEngine and JetSmartFilters.</div>
					<div>Reenter a valid license key, <a :href="upgradeLink" target="_blank">upgrade current license</a>, or <a :href="config.pricingLink" target="_blank">get a new one.</a></div>
				</div>
			</div>
			<div class="divi-views-wizard__add-license">
				<cx-vui-button
					button-style="link-accent"
					class="cx-vui-button--style-accent"
					size="link"
					@on-click="addLicenseHandler"
				>
					<template v-slot:label>
					<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="M15.8332 10.8334H10.8332V15.8334H9.1665V10.8334H4.1665V9.16675H9.1665V4.16675H10.8332V9.16675H15.8332V10.8334Z" fill="#0D88BF"/>
						</svg>
					</span>
						<span>I have one more license</span>
					</template>
				</cx-vui-button>
			</div>
			<div class="divi-views-wizard__step-controls">
				<cx-vui-button
					button-style="default"
					class="cx-vui-button--style-accent"
					size="default"
					:disabled="!isNextStep"
					@on-click="nextStepHandler"
				>
					<template v-slot:label>
						<span>Run Wizard</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="license-step__sidebar">
			<img src="https://api.crocoblock.com/downloads/images/divi-wizard/divi-wizard-60fps.gif" alt="">
		</div>
	</div>
</template>

<script>
import licenseItem from './licenseItem.vue';

export default {
	name: 'licenseStep',
	components: {
		licenseItem
	},
	data() {
		return {
			config: window.wizardConfig.config,
			primaryLicenseData: window.wizardConfig.primaryLicenseData,
		}
	},
	mounted() {

		if ( this.isNoticeVisible ) {
			  //this.nextStepHandler();
		}
	},
	computed: {
		licenseList() {
			return this.$store.getters.getLicenseList;
		},
		newlicenseData() {
			return {
				'licenseStatus': 'inactive',
				'licenseKey': '',
				'licenseDetails': {},
			};
		},

		compatibilityPlugins() {
			return this.$store.getters.getCompatibilityPlugins;
		},

		licenseCompatibilityPlugins() {
			return this.$store.getters.getLicenseCompatibilityPlugins;
		},

		licenseCompatibilityPluginNames() {
			return this.licenseCompatibilityPlugins.map( ( pluginData ) => {
				return pluginData.name;
			}).join(', ');
		},

		moreCompatibilityPlugins() {
			return this.compatibilityPlugins.filter(
				plugin => !this.licenseCompatibilityPlugins.some(
					licPlugin => licPlugin.slug === plugin.slug
				)
			)
		},

		moreCompatibilityPluginsNames() {
			return this.moreCompatibilityPlugins.map( ( pluginData ) => {
				return pluginData.name;
			}).join(', ');
		},

		isNextStep() {
			return 0 < this.licenseCompatibilityPlugins.length;
		},

		isActivated() {
			return 0 !== this.licenseList.length && ! this.licenseList.some( ( element ) => {
				return 'inactive' === element.licenseStatus
			} );
		},

		isNoticeVisible() {
			return this.isActivated && this.licenseCompatibilityPlugins.length !== this.compatibilityPlugins.length;
		},

		isNoticeType() {
			return this.isNoticeVisible && 0 === this.licenseCompatibilityPlugins.length ? 'error-type' : 'info-type';
		},

		upgradeLink() {
			return `${this.config.licenseUpgrageLink}/${ this.primaryLicenseData.key }`;
		}
	},
	methods: {
		addLicenseHandler() {
			this.$store.commit( 'addLicenseToList', {
				data: this.newlicenseData,
			} );
		},
		nextStepHandler() {
			this.$store.commit( 'updateStep', { step: 'pluginsStep' } );
		}
	}
}
</script>

<style lang="scss">
	.divi-views-wizard {
		&__license-list {
			display: flex;
			flex-direction: column;
			justify-content: start;
			align-items: stretch;
			gap: 12px;
			margin-top: 40px;
		}

		&__add-license {
			margin-top: 20px;
		}

		&__notice {
			display: flex;
			justify-content: flex-start;
			align-items: start;
			gap: 8px;
			padding: 4px 6px;
			border-radius: 8px;
			background-color: #f4f4f5;
			margin-top: 12px;

			&-content {
				font-size: 14px;

				a {
					font-weight: 700;
					text-decoration: none;
				}
			}

			&.info-type {
				background-color: #EDFCFE;
				color: #0D88BF;
			}

			&.error-type {
				background-color: #FEF1F6;
				color: #E93561;

				a {
					color: #E93561;
				}
			}

		}
	}

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

		h2 {
			font-size: 32px;
		}

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

		&__sidebar {
			overflow: hidden;
			border-radius: 20px;
		}
	}
</style>

