<template>
	<modal
		@close="closeTranslationModal"
		ref="wccTranslationModal"
		class="wcc-app-modal-translation"
	>
		<template v-slot:body>
			<div class="wcc-row wcc-text-center">
				<div class="wcc-col-12">
					<div class="wcc-translation-success-message">
						{{ getTranslationMessage( code ) }}
					</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">
					<button class="wcc-button wcc-button-secondary" @click="close">
						{{ $i18n.__("No, thanks", "webtoffee-cookie-consent") }}
					</button>
					<span v-if="isMultilingual">
						<router-link
							:to="`/languages`"
							custom
							v-slot="{ navigate }"
							>
							<a
								@click="navigate"
								class="
								wcc-button
								wcc-button-primary
								wcc-button-action
								"
							>
							{{ getButtonLabel(code) }}
							</a>
						</router-link>
					</span>	
					
					<span v-else>
						<button
							class="wcc-button wcc-button-primary"
							@click="addSelectedLanguages(code)"
						>
							{{ getButtonLabel(code) }}
						</button>
					</span>
				</div>
			</div>
		</template>
	</modal>
</template>
<script>
import Modal from "@/components/Modal.vue";
import languages from "@/modules/languages/helpers/utils";

export default {
	name: "TranslationModal",
	components: {
		Modal,
	},
	props: {
		code: [String, Array], // Define the currentLanguage prop
		isMultilingual: Boolean, // Add the is-multilingual prop
	},
	data() {
		return {
			searchText: "",
			tempSelectedLanguages: [],
			languages: {},
			currentTab: "layout",
			searchLanguages: [],
			filteredLanguages: [],
			visible: true,
		};
	},
	methods: {
		showIcon(tab) {
			return !!tab.icon;
		},
		async open() {
			await this.$refs.wccTranslationModal.show();
			this.getConfiguredLanguages();
		},
		close() {
			let data = {};
			data.show = false;
			this.setOption("translation_modal", data);
			this.saveOptions();
			this.$refs.wccTranslationModal.close();
		},
		closeTranslationModal() {
			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.isMultilingual
				? this.$i18n.__(
					"You have a multilingual site. Do you wish to set up the banner in multiple languages?",
					"webtoffee-cookie-consent"
				)
				: this.isTranslated(this.code)
				? this.$i18n.__(
					`Your site language is set to ${this.getLanguageName(this.code)}. Would you like to translate the banner content to ${this.getLanguageName(this.code)}?`,
					"webtoffee-cookie-consent"
				)
				: null; // Handle other cases or return a default message if necessary
		},
		getButtonLabel(code) {
			return this.isMultilingual
				? this.$i18n.__(
					"Set up in multiple languages",
					"webtoffee-cookie-consent"
				)
				: this.isTranslated(code)
				? this.$i18n.__(
					`Translate to ${this.getLanguageName(code)}`,
					"webtoffee-cookie-consent"
				)
				: null; // Handle other cases or return a default label if necessary
		},
        async addSelectedLanguages( code ) {
			try {
               // Check if code already exists in tempSelectedLanguages
                if (!this.tempSelectedLanguages.includes(code)) {
                    // If not, add it to the array
                    this.tempSelectedLanguages.push(code);
                }
				this.setDefault( code );
				this.$store.dispatch(
					"languages/setSelected",
                    this.tempSelectedLanguages
				);
               
				await this.$store.dispatch("languages/saveSelected");
				this.close();
				await this.purgeCache();
				await this.$store.dispatch("banners/reInit");
				await this.$store.dispatch("cookies/reInit");
			} catch (error) {
				console.log(error);
				this.$root.$emit("triggerNotification", {
					type: "error",
					message: this.$i18n.__(
						"Problem occurred while adding languages. Please try again later!",
						"webtoffee-cookie-consent"
					),
				});
			}
		},
        setDefault: async function (code) {
			await this.$store.dispatch("languages/setDefault", code);
			await this.$store.dispatch("languages/setCurrent", code);
			await this.$store.dispatch("languages/saveDefault");
		},
	},
	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-translation {
		.wcc-app-modal {
			width: 354px;
            height: auto;
			border-radius: 10px;
			border: 1px solid #58A3FE;
			background: #FAFDFF;
		}
		.wcc-button-close {
			display: none;
		}
		.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 {
			padding: 14px 15px 20px 15px;
		}
		.wcc-button.wcc-button-secondary:hover, .wcc-button.wcc-button-secondary {
			background-color: #FFF!important;
			border-color: #FFF !important;
			color: #6E7681 !important;
            font-size: 14px;
            font-style: normal;
            font-weight: 500;
            line-height: 16px;
		}
		.wcc-button.wcc-button-primary:hover, .wcc-button.wcc-button-primary, a.wcc-button.wcc-button-primary:hover, a.wcc-button.wcc-button-primary {
			background-color: #F1F8FE;
            width: auto !important;
            height: auto;
            border-radius: 6px;
            color: #056BE7;
            font-size: 14px;
            font-style: normal;
            font-weight: 600;
            line-height: 16px;
		}
		.wcc-app-modal-footer .wcc-app-modal-actions a:first-child {
			margin-right: 0px;
		}
		.wcc-translation-success-message {
			text-align: left;
		}
		.wcc-action-succes {
			width: 100%;
			box-sizing : border-box;
		}
		.wcc-app-modal-actions .wcc-button-action {
			width: 50%;
			justify-content: center;
		}
		.wcc-app-modal-header {
			display: none;
		}
		.wcc-app-modal-footer {
			padding: 0px 12px 10px 12px;
		}
		.wcc-app-modal-footer .wcc-app-modal-actions button {
			margin-left: 0px;
		}
	}
}
</style>