<template>
	<transition name="wcc-notice-fade">
		<div :class="noticeClass" v-if="isShown">
			<div class="wcc-admin-notice-content">
				<div class="wcc-admin-notice-message">
					<!-- Notice header -->
					<h5 class="wcc-admin-notice-header" v-if="!!$slots.header">
						<slot name="header"></slot>
					</h5>
					<!-- Notice message -->
					<slot></slot>
				</div>
			</div>
			<div class="wcc-admin-notice-close">
				<button
					type="button"
					class="wcc-close"
					@click="close"
					v-if="isDismissable"
					aria-label="Close"
				>
					<!-- Display "Dismiss" text or the custom dismiss text -->
					<span class="wcc-dismiss-text" @click="close">{{ isDismissableText }}</span>
				</button>
			</div>
		</div>
	</transition>
</template>

<script>
export default {
	name: "Notice",

	props: {
		type: {
			type: String,
			default: "success",
		},
		isDismissable: {
			type: Boolean,
			default: false,
		},
		showIcon: {
			type: Boolean,
			default: false,
		},
		isDismissableText: {
			type: String,
			default: "×", // Empty by default; "Dismiss" will be shown if not provided
		},
	},

	data() {
		return {
			isShown: true,
		};
	},

	methods: {
		close() {
			this.$emit("onDismiss");
			if (this.isShown) this.isShown = false;
		},
	},

	computed: {
		/**
		 * Get notice classes based on different conditions.
		 *
		 * @since 3.0.0
		 *
		 * @return {*}
		 */
		noticeClass() {
			return {
				"wcc-admin-notice": true,
				"wcc-admin-notice-info": this.type === "info",
				"wcc-admin-notice-error": this.type === "error",
				"wcc-admin-notice-success": this.type === "success",
				"wcc-admin-notice-warning": this.type === "warning",
				"wcc-admin-notice-default": this.type === "default",
				"wcc-admin-notice-has-icon": this.showIcon,
				"wcc-admin-notice-dismissable": this.isDismissable,
			};
		},
	},
};
</script>
<style scoped>
.wcc-dismiss-text {
	font-size: 12px;
	color: #404040;
}
</style>