<template>
	<modal
		@close="closeSuccesModal"
		ref="wccSuccesModal"
		class="wcc-app-modal-succes"
	>
		<template v-slot:body>
			<div class="wcc-row wcc-text-center">
				<div class="wcc-col-12">
					<base-icon class="wcc-success-icon" icon="check-circle" />
				</div>
			</div>
			<div class="wcc-row wcc-text-center">
				<div class="wcc-col-12">
					<div class="wcc-translation-success-message">
						{{ getTranslationMessage() }}
					</div>
				</div>
			</div>
		</template>
		<template v-slot:footer>
			<div class="wcc-app-modal-actions wcc-justify-end">
				<div class="wcc-action-succes wcc-actions-group wcc-justify-end">
					<base-button
						class="wcc-button wcc-button-outline-secondary wcc-button-update"
						@click.native="handleNavigation('languages')"
					>
						{{ $i18n.__("Go to language list", "webtoffee-cookie-consent") }}
					</base-button>
					<base-button
						class="wcc-button wcc-button-primary wcc-button-update"
						@click.native="handleNavigation('cookies')"
					>
						{{ $i18n.__("Translate cookies", "webtoffee-cookie-consent") }}
					</base-button>
				</div>
			</div>
		</template>
	</modal>
</template>
<script>
import Modal from "@/components/Modal.vue";
import languages from "@/modules/languages/helpers/utils";
import BaseIcon from "@/components/icons/BaseIcon.vue";

export default {
	name: "TranslationUpdateModal",
	components: {
		Modal,
		BaseIcon
	},
	props: {
		code: String, // Define the currentLanguage prop
	},
	data() {
		return {
			searchText: "",
			tempSelectedLanguages: [],
			languages: {},
			currentTab: "layout",
			searchLanguages: [],
			filteredLanguages: [],
			visible: true,
		};
	},
	methods: {
		showIcon(tab) {
			return !!tab.icon;
		},
		async open() {
			await this.$refs.wccSuccesModal.show();
			this.getConfiguredLanguages();
		},
		close() {
			this.$refs.wccSuccesModal.close();
		},
		closeSuccesModal() {
			this.tempSelectedLanguages = this.selectedLanguages;
		},
		getAvailableLanguages() {
			this.languages = this.$store.state.languages.available;
		},
		getConfiguredLanguages() {
			this.tempSelectedLanguages = this.selectedLanguages;
		},
		isTranslated(lang = "en") {
			const supported = languages.getTranslatedLanguages();
			return supported.includes(lang);
		},
		getLanguageName(code) {
			return languages.getName(code);
		},
		getTranslationMessage() {
			return this.isTranslated(this.code)
				? this.$i18n.__(
					`Cookie banner for ${this.getLanguageName(this.code)} language saved successfully.`,
					"webtoffee-cookie-consent"
				)
				: this.$i18n.__(
					`Cookie banner for ${this.getLanguageName(this.code)} language saved successfully. Would you like to translate cookies as well?`,
					"webtoffee-cookie-consent"
				);
		},
		handleNavigation(page) {
			try {
				const url = `${window.location.origin}/wp-admin/admin.php?page=cookie-consent#/${page}`;
				window.open(url);
			} catch (error) {
				console.error('API Error:', error);
			} finally {
				this.loading = false;
				this.$refs.wccSuccesModal.close();
			}
		
		},
	},
	computed: {
		currentTabComponent: function () {
			return `tab-${this.currentTab.toLowerCase()}`;
		},
		selectedLanguages: function () {
			return this.$store.state.languages.selected;
		},
		filterLanguages() {
			if ( this.languages.length > 0 ) {
				let selected = [],
					others = [];
				let languages = [];
				this.languages.forEach((item) => {
					if (this.selectedLanguages.includes(item.code)) {
						selected.push(item);
					} else {
						others.push(item);
					}
				});
				languages = selected.concat(others);
				return languages.filter((item) => {
					return item.name
						.toLowerCase()
						.includes(this.searchText.toLowerCase());
				});
			}
			return [];
		},
		checkIfTranslated() {
			let translated = true;
			this.tempSelectedLanguages.forEach((lang) => {
				if (this.isTranslated(lang) === false) {
					translated = false;
					return false;
				}
			});
			return translated;
		},
	},
	watch: {},
	mounted() {
		this.getAvailableLanguages();
		this.getConfiguredLanguages();
	},
};
</script>
<style lang="scss">
@include wrap-class() {
	.wcc-app-modal-succes {
		.wcc-app-modal {
			width: 590px;
			height: auto;
			border-radius: 12px;
			border: 1px solid #E9EBF8;
			background: #FFF;
			box-shadow: 0px 3px 82px 0px rgba(43, 69, 88, 0.20);
		}
		.wcc-app-modal-header {
			border-bottom : none;
		}
		.wcc-admin-notice.wcc-admin-notice-warning {
			border-radius: 4px;
			background: var(--warning-w-50, #FBF6E8);
			
			.wcc-admin-notice-message p {
				color: #997410;
			}
		}
		.wcc-app-modal-body {
			height: 300px;
		}
		.wcc-app-modal-footer {
			padding: 0px 20px 20px 20px;
		}
		.wcc-translation-success-message {
			padding-bottom: 40px;
		}
		a.wcc-button.wcc-button-secondary:hover, a.wcc-button.wcc-button-secondary {
			background-color: #FFF;
			border-color: #3157A6;
			color: #3157A6;
		}
		a.wcc-button.wcc-button-primary:hover, a.wcc-button.wcc-button-primary{
			background-color: #3157A6;
		}
	}
	.wcc-action-succes {
		width: 100%;
		box-sizing : border-box;
	}
	.wcc-app-modal-actions .wcc-button-update {
		width: 50%;
		justify-content: center;
	}
	.wcc-app-modal-footer .wcc-app-modal-actions a:first-child {
		margin-right: 10px;
	}
}
</style>