<template>
	<div class="wcc-help-widget" @click.self="handleOutsideClick" :data-test-id="`wcc-help-widget`">
        <div
            class="wcc-help-widget-container"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
            @click.stop="handleClick"
        >
            <div v-if="hover && !clicked" class="wcc-help-text" :data-test-id="`wcc-help-text`">
                {{ $i18n.__("Help", "webtoffee-cookie-consent") }}
            </div>
            <div v-if="clicked" class="wcc-help-widget-links" :data-test-id="`wcc-help-widget-links`">
                <a href="https://www.webtoffee.com/gdpr-cookie-consent-plugin-user-guide/" target="_blank" @click.stop="closeLinks" :data-test-id="`wcc-help-widget-links-setup-guide`">{{ $i18n.__("Setup guide", "webtoffee-cookie-consent") }}</a>
                <a href="https://www.webtoffee.com/faqs/" target="_blank" @click.stop="closeLinks" :data-test-id="`wcc-help-widget-links-faq`">{{ $i18n.__("FAQ", "webtoffee-cookie-consent") }}</a>
                <a href="https://www.webtoffee.com/support/" target="_blank" @click.stop="closeLinks" :data-test-id="`wcc-help-widget-links-contact-support`">{{ $i18n.__("Contact support", "webtoffee-cookie-consent") }}</a>
            </div>
            <button class="wcc-help-widget-button" :data-test-id="`wcc-help-widget-button`">
                <img src="@/img/help-widget-icon.svg" alt="Help Widget Icon" :data-test-id="`wcc-help-widget-icon`" />
            </button>
        </div>
        </div>
	</div>
</template>

<script>
export default {
	name: "HelpWidget",
	data() {
		return {
			hover: false,
			clicked: false,
		};
	},
	methods: {
		handleMouseEnter() {
			this.hover = true;
		},
		handleMouseLeave() {
			this.hover = false;
		},
		handleClick() {
			this.clicked = !this.clicked; // Toggle the clicked state
			this.hover = false; // Hide the help text when the icon is clicked
		},
		closeLinks() {
			this.clicked = false;
		},
		handleOutsideClick(event) {
			if (!this.$el.contains(event.target)) {
				this.closeLinks();
			}
		},
	},
	mounted() {
		document.addEventListener('mousedown', this.handleOutsideClick);
	},
	beforeDestroy() {
		document.removeEventListener('mousedown', this.handleOutsideClick);
	},
};
</script>

<style lang="scss">
@include wrap-class() {
	.wcc-help-widget {
		position: fixed;
		bottom: 36px;
		right: 24px;
		background: transparent;
		color: #000000;
		z-index: 1000;
		display: flex;
		justify-content: end;
		align-items: end;

		.wcc-help-widget-container {
			display: flex;
			flex-direction: column;
			align-items: end;
			justify-content: end;
			.wcc-help-widget-button {
				background: #ffffff;
				border: none;
				cursor: pointer;
				padding: 0;
				margin: 0;
				width: 45px;
				height: 45px;
                border-radius: 50px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			}

			.wcc-help-text {
				background: rgba(255, 255, 255);
				padding: 5px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				margin-bottom: 16px;
				font-size: 12px;
                padding: 10px 24px;
                border-radius: 6px;
			}

			.wcc-help-widget-links {
				display: flex;
				flex-direction: column;
				width: 200px;
				background: rgba(255, 255, 255);
				padding: 10px 0px;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
				margin-bottom: 16px;
				z-index: 9;
				border-radius: 6px;
                text-align: left;
				a {
					color: #000000;
					text-decoration: none;
                    font-size: 14px;
                    font-weight: 400;
					padding: 8px 10px;
				}
			}
            .wcc-help-widget-links::before, .wcc-help-text::before {
                content: '';
                position: absolute;
                right: 18px; /* Adjust as needed to position the triangle correctly */
                border-width: 8px; /* Adjust the size of the triangle */
                border-style: solid;
                border-color: transparent transparent transparent #FFF; /* Adjust the color to match your design */
                transform: rotate(90deg);
                bottom: 46px;
            }
			.wcc-help-widget-links a:hover {
				background: #f1f8fe;
				
			}
		}
	}
}
</style>