<template>
	<div>
		<template v-if="cookies.length">
			<div class="wcc-cookie-list">
				<div v-if="discovered.length">
					<label class="wcc-cookie-type-title">
						{{ $i18n.__("Discovered Cookies", "webtoffee-cookie-consent") }}
					</label>
					<div
						class="
							wcc-row wcc-justify-between wcc-align-center wcc-cookie-details
						"
						v-for="(cookie, key) in discovered"
						:key="key"
					>
						<!-- <div class="wcc-cookie-details-checkbox wcc-col">
							<input
								type="checkbox"
								name="item[]"
								:value="cookie.id"
								v-model="checkedItems"
							/>
						</div> -->
						<div class="wcc-cookie-details-content wcc-col-10">
							<table>
								<tbody>
									<tr>
										<th>{{ $i18n.__("Cookie", "webtoffee-cookie-consent") }}</th>
										<td>{{ cookie.name }}</td>
									</tr>
									<tr>
										<th>{{ $i18n.__("Duration", "webtoffee-cookie-consent") }}</th>
										<td>{{ cookie.duration[language] }}</td>
									</tr>
									<tr>
										<th>{{ $i18n.__("Description", "webtoffee-cookie-consent") }}</th>
										<td>{{ strippedContent( cookie.description[language] ) }}</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="wcc-cookie-details-actions wcc-col-2 wcc-justify-end">
							<button class="wcc-button-no-style">
								<base-icon
									class="wcc-nav-tab-button-icon"
									icon="edit-alt"
									height="14"
									@click="openCookieModal(cookie)"
									:data-test-id="`wcc-edit-cookie-edit-button-${cookie.slug}`"
								></base-icon>
							</button>
							<button class="wcc-button-no-style">
								<base-icon
									class="wcc-nav-tab-button-icon"
									icon="trash"
									height="14"
									color="#eb4034"
									@click="deleteCookie(cookie)"
									:data-test-id="`wcc-edit-cookie-delete-button-${cookie.slug}`"
								></base-icon>
							</button>
						</div>
					</div>
				</div>
				<div v-if="selfDeclared.length">
					<label class="wcc-cookie-type-title">
						{{ $i18n.__("Self-declared Cookies", "webtoffee-cookie-consent") }}
					</label>
					<div
						class="
							wcc-row wcc-justify-between wcc-align-center wcc-cookie-details
						"
						v-for="(cookie, key) in selfDeclared"
						:key="key"
					>
						<!-- <div class="wcc-cookie-details-checkbox wcc-col">
							<input
								type="checkbox"
								name="item[]"
								:value="cookie.id"
								v-model="checkedItems"
							/>
						</div> -->
						<div class="wcc-cookie-details-content wcc-col-10">
							<table>
								<tbody>
									<tr>
										<th>{{ $i18n.__("Cookie", "webtoffee-cookie-consent") }}</th>
										<td>{{ cookie.name }}</td>
									</tr>
									<tr>
										<th>{{ $i18n.__("Duration", "webtoffee-cookie-consent") }}</th>
										<td>{{ cookie.duration[language] }}</td>
									</tr>
									<tr>
										<th>{{ $i18n.__("Description", "webtoffee-cookie-consent") }}</th>
										<td>{{ strippedContent( cookie.description[language] ) }}</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="wcc-cookie-details-actions wcc-col-2 wcc-justify-end">
							<base-popper :content="$i18n.__('Edit cookie', 'webtoffee-cookie-consent')">
							<button class="wcc-button-no-style">
								<base-icon
									class="wcc-nav-tab-button-icon"
									icon="edit-alt"
									height="14px"
									color="#000000"
									@click="openCookieModal(cookie)"
									:data-test-id="`wcc-edit-cookie-edit-button-${cookie.slug}`"
								></base-icon>
							</button>
							</base-popper>
							<base-popper :content="$i18n.__('Delete cookie', 'webtoffee-cookie-consent')">
								<button class="wcc-button-no-style">
									<base-icon
										class="wcc-nav-tab-button-icon"
										icon="trash"
										height="14px"
										color="#eb4034"
										@click="deleteCookie(cookie)"
										:data-test-id="`wcc-edit-cookie-delete-button-${cookie.slug}`"
									></base-icon>
								</button>
							</base-popper>
						</div>
					</div>
				</div>
			</div>
		</template>
		<template v-else>
			<div class="wcc-empty-place-holder-container">
				<div class="wcc-emply-placeholder">
					<div class="wcc-scanner-inner-container">
						<div class="wcc-scanner-image-container">
							<base-icon icon="scanner" color="#000000"></base-icon>
						</div>
						<div class="wcc-emply-placeholder-label">
							{{ $i18n.__("No cookies found!", "webtoffee-cookie-consent") }}
						</div>
					</div>
				</div>
			</div>
		</template>
	</div>
</template>
<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
export default {
	name: "CookiesTable",
	components: {
		BaseIcon,
	},
	props: {
		cookies: {
			type: [Array, Object],
		},
		language: String,
	},
	data() {
		return {
			isModalVisible: false,
			checkedItems: [],
			currentCookieAction: "",
		};
	},
	methods: {
		openCookieModal(cookie) {
			this.$emit("createEditCookie", cookie);
		},
		deleteCookie(cookie) {
			this.$emit("deleteCookie", cookie);
		},
		closeModal() {
			this.isModalVisible = false;
		},
		strippedContent(description){
            if(!description){
                return "";
            }
            return description.replace(/(<([^>]+)>)/ig, "");
        },
	},
	computed: {
		selectAll: {
			get: function () {
				if (!this.cookies.length) {
					return false;
				}
				return this.cookies
					? this.checkedItems.length == this.cookies.length
					: false;
			},
			set: function (value) {
				var selected = [];
				if (value) {
					this.cookies.forEach(function (item) {
						selected.push(item.id);
					});
				}
				this.checkedItems = selected;
			},
		},
		discovered: function () {
			return this.cookies.filter((cookie) => cookie.discovered == true);
		},
		selfDeclared: function () {
			return this.cookies.filter((cookie) => cookie.discovered == false);
		},
	},
};
</script>
<style lang="scss" scoped>
@include wrap-class() {
	.wcc-button-no-style {
		margin-left: 11px;
	}
	.wcc-cookie-list {
		.wcc-cookie-type-title {
			color: #a0a0a0;
		}
		.wcc-cookie-details {
			margin: 5px 1px 15px 1px;
			background-color: #f6f7f7;
		}
		.wcc-cookie-details-checkbox {
			max-width: 1%;
		}
		.wcc-cookie-details-content {
			padding: 10px;
			table {
				th {
					text-align: left;
					padding: 5px;
				}
				td {
					padding: 5px;
				}
			}
		}
		.wcc-cookie-details-actions {
			padding: 50px 10px;
		}
	}
	.wcc-empty-place-holder-container {
		min-height: 200px;
		.wcc-emply-placeholder {
			text-align: center;
		}
		.wcc-emply-placeholder-label{
			color: #6E7681;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: 28px;
			padding-top: 6px;
			padding-bottom: 6px;
			margin-left: 15px;
		}
	}
}
</style>