<template>
	<div v-if="loading">
		<div class="wcc-placeholder-loader-container">
			<div class="wcc-placeholder-loader">
				<card-loader />
				<card-loader />
			</div>
		</div>
	</div>
	<div v-else>
		<div class="wcc-center wcc-direction--column" v-if="!consentLogs.length">
			<img src="~@/assets/consent-log-empty.svg" alt="" />
			<p> {{ $i18n.__("No consent log recorded yet!", "webtoffee-cookie-consent") }}</p>
		</div>
		<table
			v-else
			class="wp-list-table wcc-table wcc-table-consent-logs"
			:class="tableClass"
		>
			<thead>
				<tr>
					<th>{{ $i18n.__("Consent ID", "webtoffee-cookie-consent") }}</th>
					<th>
						{{ $i18n.__("Consent Status", "webtoffee-cookie-consent") }}
					</th>
					<th>
						{{ $i18n.__("Date and Time", "webtoffee-cookie-consent") }}
					</th>
				</tr>
			</thead>
			<tbody v-if="loading">
				<tr>
					<td>
						<div class="wcc-placeholder-loader-container">
							<div class="wcc-placeholder-loader">
								<card-loader />
								<card-loader />
							</div>
						</div>
					</td>
				</tr>
			</tbody>
			<tbody v-else>
				<tr v-for="consent in consentLogs" :key="consent.id">
					<td>
						<span
							style="
								white-space: nowrap;
								overflow: hidden;
								display: block;
							"
							v-if="consent.consent_id !== null"
						>
							{{ consent.consent_id }}
						</span>
					</td>
					<td>
						<div
							:class="{
								'is-open': isActive[consent.id],
								'wcc-consent-status': true,
								'wcc-direction--column': true,
							}"
						>
							<badge
								:title="getConsentStatus(consent.status)"
								:type="getConsentBadge(consent.status)"
								><div
									@click="toggleAccordion(consent.id)"
									class="wcc-badge-action"
									style="margin-left: 5px"
									v-if="shouldShowAction( consent.status )"
								>
									<base-icon
										style="margin-left: 5px"
										icon="accordionArrow"
										width="12px"
										height="8px"
									/>
								</div>
							</badge>
							<div class="wcc-consent-lists" v-if="isActive[consent.id]">
								<div class="wcc-consent-list">
									<div
										class="wcc-align-center"
										v-for="logItem in consent.log"
										:key="logItem.name"
									>
										<div class="wcc-align-center">
											{{ logItem.name }}
											<base-icon
												style="margin-left: 5px"
												:icon="
													logItem.status == 'yes'
														? 'successCircleMinor'
														: 'errorCircleMinor'
												"
												width="15px"
												height="15px"
												color="#8893a1"
											/>
										</div>
									</div>
								</div>
							</div>
						</div>
					</td>
					<td class="text-nowrap">
						{{ consent.date_created }}
					</td>
				</tr>
			</tbody>
		</table>
		<pagination
			v-if="hasPagination"
			:total="getTotalItems"
			:perPage="perPage"
			:currentPage="currentPage"
			@pagechanged="onPageChange"
		>
		</pagination>
	</div>
</template>

<script>
import Badge from "@/components/elements/Badge.vue";
import BaseIcon from "@/components/icons/BaseIcon.vue";
import Pagination from "@/components/Pagination.vue";
import wccRest from "@/helpers/api";
import CardLoader from "@/components/elements/CardLoader.vue";
import Vue from "vue";
export default {
	name: "ConsentLogsTable",
	props: {
		totalItems: {
			type: Number,
			default: -1,
		},
		perPage: {
			type: Number,
			default: 10,
		},
		tableClass: {
			type: String,
		},
	},
	components: {
		Badge,
		BaseIcon,
		Pagination,
		CardLoader,
	},
	data() {
		return {
			consentLogs: [],
			isActive: [],
			total: 10,
			loading: true,
			currentPage: 1,
			/* translators: %1$s: URL to the consent logging settings page */
			emptyMessage: this.$i18n.sprintf(
				this.$i18n.__(
					'There are no consents recorded yet. Make sure you have enabled <a href="%1$s" target="_blank">Consent logging</a>.',
					"webtoffee-cookie-consent"
				),
				"admin.php?page=cookie-law-info-logs"
			),
		};
	},
	mounted() {
		this.getConsentLog();
	},
	methods: {
		async toggleAccordion(i) {
			const value = this.isActive[i] ? !this.isActive[i] : true;
			Vue.set(this.isActive, i, value);
			console.log(this.isActive[i]);
		},
		async getConsentLog() {
			this.loading = true;
			await wccRest
				.get({
					path: "consent_logs/",
					parse: false,
					params: {
						per_page: this.perPage,
						paged: this.currentPage,
					},
				})
				.then((response) => {
					this.total = parseInt(response.headers.get("X-WP-Total"));
					return response.json();
				})
				.then((data) => {
					this.consentLogs = data;
				});
			this.loading = false;
			this.$emit("consentLogLoaded", this.consentLogs);
		},
		getConsentStatus(status) {
			let text = this.$i18n.__("Partially accepted", "webtoffee-cookie-consent");
			if (status === "accepted")
				text = this.$i18n.__("Accepted", "webtoffee-cookie-consent");
			else if (status === "rejected")
				text = this.$i18n.__("Rejected", "webtoffee-cookie-consent");
			return text;
		},
		getConsentBadge(status) {
			let type = "warning";
			if (status === "accepted") type = "success";
			else if (status === "rejected") type = "error";
			return type;
		},
		onPageChange(page) {
			this.currentPage = page;
			this.getConsentLog();
		},
		shouldShowAction( status ) {
			return !( status === 'accepted' || status === 'rejected' );
		}
	},
	computed: {
		hasPagination() {
			return this.totalItems > 0
				? this.totalItems > this.perPage
				: this.total > this.perPage;
		},
		getTotalItems() {
			return this.total;
		},
	},
};
</script>
<style lang="scss">
@include wrap-class() {
	.wcc-consent-status {
		display: flex;
		align-items: flex-start;
	}
	.wcc-dropdown .wcc-button-no-style {
		display: flex;
	}
	.wcc-btn-consent-status {
		margin-left: 5px;
	}
	.wcc-table {
		&.wcc-table-consent-logs {
			background: color(mono, white);
			th,
			td {
				padding-left: 30px;
				vertical-align: top;
				text-align: left;
				width: 250px;
			}
			th:first-child,
			td:first-child {
				width: 400px;
			}
		}
	}
	.wcc-table-consent-logs {
		.wcc-placeholder-loader-container {
			min-height: 235px;
		}
		.wcc-placeholder-loader {
			width: 100%;
			position: absolute;
			left: 0;
			right: 0;
			height: 100px;
		}
		.wcc-card-loader-container {
			padding: 20px 25px 0px 25px;
		}

		.wcc-empty-place-holder-container {
			min-height: 200px;
			.wcc-emply-placeholder {
				position: absolute;
				width: 100%;
				left: 0;
				top: 0;
				text-align: center;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				svg {
					width: 110px;
					height: 110px;
				}
			}
		}
		.wcc-consent-lists {
			margin-left: 2px;
			margin-top: 10px;
		}
		.wcc-consent-list > div {
			padding-top: 2px;
			text-transform: capitalize;
		}
	}
	.wcc-consent-logs-summary {
		.wcc-table-consent-logs {
			border: none;
			thead {
				background-color: transparent;
			}
			th,
			td {
				padding-left: 0;
			}
		}
	}
	.wcc-consent-status {
		&.is-open {
			.wcc-badge-action > span {
				transform: rotate(180deg);
			}
		}
		.wcc-badge-content {
			text-transform: uppercase;
			font-size: 11px;
			font-weight: 700;
			padding: 0px 5px;
		}
	}
	.wcc-badge-action {
		cursor: pointer;
	}
}
</style>