<template>
	<div class="divi-views-wizard__license-item">
		<div class="divi-views-wizard__license-controls">
			<cx-vui-input
				name="page-template-search-filter"
				placeholder="Enter your license key"
				:prevent-wrap="true"
				size="fullwidth"
				type="text"
				:value="licenseKey"
				@on-change="keyOnChangeHandler( $event.target.value )"
				:disabled="isActivated"
			>
			</cx-vui-input>
			<cx-vui-button
				v-if="!isActivated"
				button-style="accent-border"
				class="cx-vui-button--style-accent cx-vui-button--license-activate"
				size="mini"
				@on-click="licenseAction()"
				:loading="progressState"
			>
				<template v-slot:label>
					<span>Activate</span>
				</template>
			</cx-vui-button>
			<cx-vui-button
				v-if="isActivated"
				button-style="accent-border"
				class="cx-vui-button--style-accent cx-vui-button--license-deactivate"
				size="mini"
				@on-click="licenseAction"
				:loading="progressState"
			>
				<template v-slot:label>
					<span>Deactivate</span>
				</template>
			</cx-vui-button>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { toast } from 'vue3-toastify';
import 'vue3-toastify/dist/index.css';

export default {
	name: 'liceseItem',
	components: {},
	props: {
		licenseData: Object
	},
	data() {
		return {
			licenseKey: this.licenseData.licenseKey,
			config: window.wizardConfig.config,
			progressState: false,
			ajaxLicenseAction: null,
		}
	},
	computed: {
		licenseActionType() {
			return  ! this.isActivated ? 'activate' : 'deactivate';
		},

		isActivated() {
			return 'inactive' !== this.licenseData.licenseStatus
		},

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

		licenseCompatibilityPlugins() {
			const plugins = this.licenseData?.licenseDetails?.plugins || {};
			const compat = this.compatibilityPlugins || [];

			return Object.values( compat ).filter( plugin =>
				Object.prototype.hasOwnProperty.call( plugins, plugin.slug )
			);
		},
	},
	methods: {
		keyOnChangeHandler( text ) {
			this.licenseKey = text;
		},

		licenseAction() {
			const self = this;
			let actionType = this.licenseActionType;

			this.progressState = true;

			this.ajaxLicenseAction = jQuery.ajax( {
				type: 'POST',
				url: window.wizardConfig.ajaxUrl,
				dataType: 'json',
				data: {
					action: 'jet_license_action',
					data: {
						license: this.licenseKey,
						action: actionType,
						nonce: window.wizardConfig.nonce,
					}
				},
				beforeSend: function( jqXHR, ajaxSettings ) {

					if ( null !== self.ajaxLicenseAction ) {
						self.ajaxLicenseAction.abort();
					}
				},
				success: function( responce, textStatus, jqXHR ) {
					self.progressState = false;

					let licenseStatus  = responce.status,
						licenseDetails = responce.data;

					toast.success( responce.message );

					if ( 'success' === licenseStatus ) {

						switch ( actionType ) {
							case 'activate':
								self.$store.commit( 'updateNewLicense', {
									data: {
										'licenseStatus': 'active',
										'licenseKey': licenseDetails.license,
										'licenseDetails': licenseDetails
									},
								} );

								break
							case 'deactivate':
								self.$store.commit( 'removeLicenseToList', {
									key: licenseDetails.license_key,
								} );
								break
						}
					}
				}
			} );
		}
	}
}
</script>

<style lang="scss">
	.divi-views-wizard {
		&__license-item {
			display: flex;
			flex-direction: column;
			align-items: stretch;
			gap: 12px;
		}

		&__license-controls {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			gap: 16px;

			.cx-vui-component-raw {
				flex: 1 1 auto;
			}

			.cx-vui-button {
				min-width: 116px;
			}
		}
	}
</style>

