<template>
	<div class="wcc-card" :class="getLoadingClass" v-if="pluginStatus">
		<div class="wcc-card-header" v-if="title">
			<h5 class="wcc-card-title">
				{{ title }}
			</h5>
			<div class="wcc-card-actions" v-if="hasActions">
				<slot name="headerAction"></slot>
			</div>
		</div>
		<div :class="getBodyClass" v-if="hasBodySlot">
			<card-loader v-if="loading"></card-loader>
			<slot name="body" v-else></slot>
		</div>
		<slot name="outside"></slot>
		<div class="wcc-card-footer" v-if="hasFooterSlot">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script>
import CardLoader from '@/components/elements/CardLoader.vue';

export default {
	components: { CardLoader },
	name: "Card",
	props: {
		title: {
			type: String,
			required: false,
		},

		bodyClass: {
			type: String,
			default: "",
		},
		loading: {
			type: Boolean,
			default: false,
		},
		fullWidth: {
			type: Boolean,
			default: false,
		}
	},

	computed: {
		/**
		 * Check if the actions slot is set.
		 *
		 * @since 3.0.0
		 *
		 * @return {boolean}
		 */
		hasActions() {
			return !!this.$slots.headerAction;
		},

		/**
		 * Check if the body slot is set.
		 *
		 * @since 3.0.0
		 *
		 * @return {boolean}
		 */
		hasBodySlot() {
			return !!this.$slots.body;
		},

		/**
		 * Check if the footer slot is set.
		 *
		 * @since 3.0.0
		 *
		 * @return {boolean}
		 */
		hasFooterSlot() {
			return !!this.$slots.footer;
		},

		/**
		 * Get the class object for the box.
		 *
		 * If the data is being processed, add loading class.
		 *
		 * @since 3.0.0
		 *
		 * @return {*}
		 */
		getLoadingClass() {
			return {
				"wcc-loading": this.loading,
			};
		},

		/**
		 * Get the class object for the body.
		 *
		 * @since 3.0.0
		 *
		 * @return {*}
		 */
		getBodyClass() {
			return {
				"wcc-card-body": true,
				"wcc-card-body--full":this.fullWidth,
				[this.bodyClass]: this.bodyClass,
			};
		},
		pluginStatus() {
			return this.$store.state.settings.status;
		}
	},
};
</script>
