<template>
	<div v-if="$route.params.language">
		<transition name="fade">
			<router-view />
		</transition>
	</div>
	<div class="wcc-section wcc-zero--padding wcc-zero--margin" v-else>
		<div class="wcc-section-header wcc-align-center wcc-language-section-header">
			<div class="wcc-section-title">
				<h3>{{ $i18n.__("Languages", "webtoffee-cookie-consent") }}</h3>
			</div>
			<div class="wcc-section-header-actions wcc-align-center">
				<button class="wcc-button" @click="openLanguageModal" :data-test-id="`wcc-add-language-button`">
					+ {{ $i18n.__("Add Language", "webtoffee-cookie-consent") }}
				</button>
			</div>
		</div>
		<div class="wcc-section-content">
			<div class="wcc-row">
				<div class="wcc-col-12">
					<div class="wcc-consent-language-lists">
						<table class="wp-list-table wcc-custom-table">
							<thead>
								<tr>
									<th>{{ $i18n.__("Language", "webtoffee-cookie-consent") }}</th>
									<th>{{ $i18n.__("Language Code", "webtoffee-cookie-consent") }}</th>
									<th></th>
								</tr>
							</thead>
							<tbody v-if="loading">
								<tr>
									<td>
										<card-loader />
									</td>
									<td>
										<card-loader />
									</td>
									<td>
										<card-loader />
									</td>
									
								</tr>
							</tbody>
							<tbody v-else>
								<tr v-for="language in selectedLanguages" :key="language.code">
									<td>
										<div class="wcc-language-name">
											<div>
												{{ language.name }}
											</div>
											<div
												class="wcc-align-center wcc-language-badge"
												v-if="defaultLanguage == language.code"
											>
												<badge
													:title="$i18n.__('Default', 'webtoffee-cookie-consent')"
													type="info"
												></badge>
											</div>
										</div>
									</td>
									<td class="wcc-language-table-col">
										{{ language.code }}
									</td>
									<td class="wcc-language-table-col-actions">
										<div class="wcc-row">
											<div class="wcc-col">
												<div class="wcc-justify-end">
													<router-link
														:to="`languages/edit/${language.code}`"
														custom
														v-slot="{ navigate }"
														:data-test-id="`wcc-edit-language-button-${language.code}`"
													>
														<a
															@click="navigate"
															class="
																wcc-button
																wcc-button-secondary
																wcc-button-small
																wcc-button-icon
															"
															><base-icon icon="editAlt" width="13" />
															{{ $i18n.__("Edit Content", "webtoffee-cookie-consent") }}
														</a>
													</router-link>
													<div
														class="wcc-languages-more-actions"
														:disabled="defaultLanguage == language.code"
													>
														<button
															data-type="icon"
															class="wcc-button wcc-button-secondary"
															:data-test-id="`wcc-language-more-actions-button-${language.code}`"
														>
															...
														</button>
														<div class="wcc-languages-more-actions-list">
															<ul>
																<li>
																	<base-popper
																		v-if="defaultLanguage === language.code"
																		:content="
																			$i18n.__(
																				'You can\'t delete the default language.',
																				'webtoffee-cookie-consent'
																			)
																		"
																		:data-test-id="`wcc-delete-language-button-${language.code}`"
																		><a
																			@click="deleteLanguage(language)"
																			:class="{
																				'wcc-disabled':
																					defaultLanguage == language.code,
																			}"
																			>{{
																				$i18n.__("Delete", "webtoffee-cookie-consent")
																			}}
																		</a>
																	</base-popper>
																	<a v-else @click="deleteLanguage(language)"
																		:data-test-id="`wcc-delete-language-button-${language.code}`"
																		>{{ $i18n.__("Delete", "webtoffee-cookie-consent") }}
																	</a>
																</li>
																<li>
																	<a
																		@click="setDefault(language, 'default')"
																		:class="{
																			'wcc-disabled':
																				defaultLanguage == language.code,
																		}"
																		:data-test-id="`wcc-set-default-language-button-${language.code}`"
																		>{{
																			$i18n.__(
																				"Set as default",
																				"webtoffee-cookie-consent"
																			)
																		}}</a
																	>
																</li>
															</ul>
														</div>
													</div>
												</div>
											</div>
										</div>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<language-selector ref="LanguageSelector"></language-selector>
	</div>
</template>
<script>
import contentJson from "../../../../modules/banners/includes/contents/default.json";
import LanguageSelector from "../components/LanguageSelector.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";
import Badge from "@/components/elements/Badge.vue";
import languages from "@/modules/languages/helpers/utils";
import banners from "@/modules/banners/helpers/utils";
import CardLoader from "@/components/elements/CardLoader.vue";


import { mapState } from "vuex";

export default {
	name: "Languages",
	components: {
		LanguageSelector,
		BaseIcon,
		Badge,
		CardLoader,
	},
	data() {
		return {
			tempSelectedLanguages: [],
			languages: {},
			isLanguageModalVisible: false,
			currentTab: "layout",
			loading: true,
			defaultContent: contentJson,
		};
	},
	methods: {
		loadBanner: async function () {
			try {
				await banners.getActiveBanner();
			} catch (error) {
				console.error(error);
			}
		},
		showIcon(tab) {
			if (tab.icon) {
				return true;
			}
			return false;
		},
		openLanguageModal() {
			this.$refs.LanguageSelector.open();
		},
		loadEditPage: function (language) {
			const route = this.$router.getRouteByName("edit");
			this.$router.push({
				name: route.name,
				query: { cky_lang: language.code },
			});
		},
		deleteLanguage: async function (language) {
			if (language.code === this.defaultLanguage) return;
			if (
				confirm(
					this.$i18n.__(
						"Are you sure you want to delete this language?",
						"webtoffee-cookie-consent"
					)
				)
			) {
				let code = language.code;
				if (code) {
					let response = await languages.deleteLanguage(code);
					if (response) {
						this.$root.$emit("triggerNotification", {
							type: "success",
							message: this.$i18n.__(
								"Successfully deleted the language",
								"webtoffee-cookie-consent"
							),
						});
					} else {
						this.$root.$emit("triggerNotification", {
							type: "error",
							message: this.$i18n.__("Failed", "webtoffee-cookie-consent"),
						});
					}
				}
			}
		},
		setDefault: async function (language) {
			await this.$store.dispatch("languages/setDefault", language.code);
			await this.$store.dispatch("languages/setCurrent", language.code);
			await this.$store.dispatch("languages/saveDefault");
		},
	},
	computed: {
		...mapState("languages", ["default", "selected", "available"]),
		currentTabComponent: function () {
			return `tab-${this.currentTab.toLowerCase()}`;
		},
		availableLanguages: function () {
			return this.available;
		},
		selectedLanguages: function () {
			return languages.getLanguageDetails(this.available, this.selected);
		},
		defaultLanguage: function () {
			return this.default;
		},
		banner() {
			return this.$store.state.banners.current;
		},
	},
	async created() {
		this.loading = true;
		await this.loadBanner();
		this.loading = false;
	},
};
</script>
<style lang="scss">
@include wrap-class() {
	.wcc-consent-language-lists {
		padding: 10px;
		background-color: color(mono, white);
		.wcc-language-table-col {
			text-transform: uppercase;
			width: 15%;
		}
		.wcc-badge {
			border-radius: 50px;
			background: #EBF1FD;
			color: #3157A6;
		}
		.wcc-language-badge {
			margin-left: 15px;
		}
		.wcc-badge-content {
			border-radius: 3px;
			padding: 0px 4px;
		}
		.wcc-custom-table {
			th:first-child,
			td:first-child {
				width: 30%;
			}
			.wcc-language-name {
				display: flex;
				align-items: center;
			}
		}
		.wcc-language-table-col-actions {
			.wcc-button.wcc-button-secondary, a.wcc-button.wcc-button-secondary , a.wcc-button.wcc-button-secondary:hover{
				border-color: transparent;
				background-color : transparent;
			}
			.wcc-languages-more-actions {
				margin-right: 14px;
			}
		}
	}
	.wcc-section-header-actions button.wcc-button {
		background-color : #3157A6;
	}
	.wcc-language-section-header {
		margin-left: 20px;
	}
	.wcc-section-title h3 {
		font-size: 16px;
	}
	.wcc-language-table-col-actions {
		.wcc-button {
			margin-left: 10px;
		}
	}
	.wcc-languages-more-actions {
		position: relative;
		display: inline-block;
	}
	.wcc-languages-more-actions-list {
		display: none;
		position: absolute;
		background-color: #fafafb;
		width: max-content;
		border-radius: 3px;
		border: 1px solid #c9d0d6;
		min-width: 130px;
		z-index: 1;
		right: 0;
		.wcc-popper-container,
		.wcc-poppper-trigger {
			display: block;
			.wcc-popper {
				width: 150px;
			}
		}
		.wcc-popper-container {
			margin-left: 0px;
		}
		ul {
			list-style: none;
			padding-left: 0;
			margin: 0;
			li {
				margin-bottom: 0px;
				display: flex;
				flex-direction: column;
				a {
					display: flex;
				}
			}
		}
	}
	.wcc-languages-more-actions-list a {
		color: #3c434a;
		padding: 10px;
		text-decoration: none;
		display: block;
	}
	.wcc-languages-more-actions-list a:hover {
		background-color: #f1f1f1;
	}
	.wcc-languages-more-actions:hover .wcc-languages-more-actions-list {
		display: block;
	}
	.fade-enter-active {
		transition: opacity 0.5s;
	}
	.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
		opacity: 0;
	}
}
</style>
