<template>
	<w-notification
		class="save-changes" 
		:value="changed"
		bottom
		center
		plain
	>
		<span class="save-changes__title">
			<w-icon size="1.25rem" class="left">
				mdi mdi-alert-circle
			</w-icon>
			{{ $t("GENERAL_UNSAVED_CHANGES") }}
		</span>

		<div>
			<w-button
				text
				color="white"
				@click="revert"
			>
				<span>Revert</span>
			</w-button>

			<w-button
				color="white"
				bg-color="primary"
				:loading="isSaving"
				@click="save"
			>
				Save
				<w-icon class="right">
					mdi mdi-check
				</w-icon>
			</w-button>
		</div>
	</w-notification>
</template>

<script lang="ts">
import { isEqual } from 'lodash';
import Vue from 'vue';

export default Vue.extend({

	props: {
		value: {
			type: Object,
			required: true
		},
		onSave: {
			type: Function,
			required: true
		}
	},

	data: () => ({
		original: null as any,
		changed: false,
		isSaving: false,
	}),

	watch: {
		value: {
			deep: true,
			handler() {
				this.changed = !isEqual(this.value, this.original);
			}
		}
	},

	created() {
		this.original = { ...this.value };
	},

	methods: {

		revert() {
			this.$emit('input', { ...this.original });
		},

		async save() {
			this.isSaving = true;

			await Promise.resolve(this.onSave());

			this.changed = false;
			this.isSaving = false;
			this.original = { ...this.value };
		}

	}
});
</script>

<style lang="scss">
.save-changes {
	.w-alert {
		@include font-weight(normal);
		@include padding(3);
		@include padding(4, l);
		@include margin(3, b);
		@include rounded(xl);

		color: white;
		display: flex;
		min-width: 500px;
		// box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 20px 25px -5px, rgba(0, 0, 0, 0.35) 0px 10px 10px -5px;
		background-color: var(--color-misc-1);
		justify-content: space-between;
		align-items: center;
		border: none;

		@include glow(rgba(48, 60, 77, 0.65), 0.5);

		@include dark {
			@include glow(rgba(20, 23, 27, 0.85), 0.75);
		}
	}
}
</style>