
<template>
	<transition name="wcc-app-modal-fade" >
		<div class="wcc-app-modal-backdrop" v-if="isVisible">
			<div
				class="wcc-app-modal"
				role="dialog"
				:aria-labelledby="id + '-' + 'title'"
				:aria-describedby="id + '-' + 'description'"
			>
				<div
					class="wcc-app-modal-header"
					:id="id + '-' + 'title'"
					v-if="type === 'default'"
				>
					<slot name="header"></slot>
					<button
						type="button"
						class="wcc-button-close"
						@click="close"
						aria-label="Close wcc-modal"
						v-if="dismissable"
					>
						<base-icon icon="close" width="15px" height="15px" color="#8893a1" />
					</button>
				</div>

				<div class="wcc-app-modal-body" :id="id + '-' + 'description'">
					<button
						type="button"
						class="wcc-button-close"
						@click="close"
						aria-label="Close wcc-modal"
						v-if="dismissable && type === 'info'"
					>
						<base-icon icon="close" width="15px" height="15px" color="#8893a1" />
					</button>
					<slot name="body"></slot>
				</div>

				<div class="wcc-app-modal-footer" v-if="!!$slots.footer">
					<slot name="footer"></slot>
				</div>
			</div>
		</div>
	</transition>
</template>
<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
export default {
	name: "Modal",
	components: {
		BaseIcon,
	},
	props: {
		id: {
			type: String,
			default: "wcc-modal",
		},
		dismissable: {
			type: Boolean,
			default: true,
		},
		type: {
			type: String,
			default: "default",
		},
		visible: {
			type: Boolean,
			default: false,
		}
	},
	data() {
		return {
			isVisible: false,
		};
	},
	methods: {
		show() {
			this.isVisible = true;
			document.body.classList.add("wcc-app-modal-open");
		},
		close() {
			this.isVisible = false;
			document.body.classList.remove("wcc-app-modal-open");
			this.$emit("close");
		},
	},
	computed: {
		hasFooter() {
			return !!this.$slots.footer;
		}
	},
	created() {
		if(this.visible === true ) this.isVisible = true;
	}
};
</script>

<style>
</style>