<template>
	<div v-if="loading" class="loader" :style="spinnerStyle"></div>
</template>

<script>
	export default {
		props: {
			style: {
				required: false,
				type: Object,
				default: () => {}
			},

			loading: {
				required: true,
				type: Boolean
			},

			color: {
				type: String,
				default: '#42b983'
			},

			staticColor: {
				type: String,
				default: '#f3f3f3'
			},

			thickness: {
				type: [String, Number],
				default: 3
			},

			width: {
				type: [String, Number],
				default: 20
			},

			height: {
				type: [String, Number],
				default: 20
			},
		},

		computed: {
			spinnerStyle () {
				return Object.assign({
					width: this.addPx(this.width),
					height: this.addPx(this.height),
					border: `${this.addPx(this.thickness)} solid ${this.staticColor}`,
					borderTop: `${this.addPx(this.thickness)} solid ${this.color}`,
					borderRadius: '50%',
				}, this.style);
			}
		},

		methods: {
			/**
			 * Make the given var a string then check if it contains px and return it else add px.
			 *
			 * @param {mixed} a
			 */
			addPx (a) {
				return String(a).indexOf('px') !== -1 ? a : a + 'px';
			}
		}
	}
</script>

<style scoped>
	.loader {
	    border: 16px solid #f3f3f3; /* Light grey */
	    border-top: 16px solid #3498db; /* Blue */
	    border-radius: 50%;
	    width: 120px;
	    height: 120px;
	    animation: spin 2s linear infinite;
	}

	@keyframes spin {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}
</style>