<script lang="ts">
	import { setContext } from 'svelte';
	let visible: boolean = false;
	let title: string = '';
	let description: string = '';
	let validateButton: string = '';
	let validate: Function = () => {};

	const alert = (newAlert: {
		title: string;
		description: string;
		validate: Function;
		validateButton?: string;
	}) => {
		title = newAlert.title;
		description = newAlert.description;
		validateButton = newAlert.validateButton || 'Oui';
		validate = newAlert.validate;
		visible = true;
	};

	setContext('alert', { alert });

	const close = () => {
		visible = false;
	};

	const keyPress = () => {};
</script>

<slot />

<div class="overlay" on:click={() => close()} class:visible on:keypress={keyPress} />

<div id="modal" class:visible on:keypress={keyPress}>
	<div class="head">
		<div>
			<p>{title}</p>
		</div>
	</div>
	<div class="desc">
		<p>{description}</p>
	</div>
	<div class="buttons">
		<div>
			<button
				on:click={() => {
					validate();
					close();
				}}
				class="valid">Oui</button
			>
			<button on:click={close} class="cancel">Non</button>
		</div>
	</div>
</div>

<style lang="scss">
	* {
		margin: 0;
	}
	.valid {
		background-color: rgba(255, 79, 100, 0.2);
		color: rgb(255, 79, 100);
		&:hover {
			background-color: rgba(199, 38, 57, 0.2);
		}
	}
	.cancel {
		background-color: rgba(13, 2, 33, 0.3);
		color: white;
		&:hover {
			background-color: rgba(32, 5, 82, 0.3);
		}
	}

	.head {
		width: 100%;
		padding: 26px 24px;
		display: flex;
		justify-content: space-between;
		font-size: 1.1em;
		border-radius: 5px 5px 0 0;
		background-color: #ff4f64;
	}
	.desc {
		width: 100%;
		padding: 24px;
		background-color: #1d1a5a;
		font-size: 0.9em;
	}

	.buttons {
		background-color: #1d1a5a;
		width: 100%;
		padding: 0 24px 30px 24px;
		border-radius: 0 0 5px 5px;
		text-align: right;
		box-sizing: border-box;
		button {
			min-height: 36px;
			padding-inline: 16px;
			margin-left: 2%;
			border: none;
			border-radius: 8px;
			transition: 0.3s ease-in-out;
			cursor: pointer;
		}
		div {
			border-top: 1px solid gray;
			padding-top: 20px;
		}
	}

	#modal {
		position: fixed;
		top: 50%;
		left: 50%;
		//width: 50%;
		max-width: 600px;
        min-width: 500px;
		transform: translateX(-50%) translateY(-50%) scale(0.7);
		visibility: hidden;
		transition: 0.4s;
		opacity: 0;
		z-index: 2000;
		&.visible {
			visibility: visible !important;
			transform: translateX(-50%) translateY(-50%) scale(1) !important;
			opacity: 1 !important;
		}
	}

	.overlay {
		background-color: black;
		opacity: 0;
		z-index: 1999;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		visibility: hidden;
		&.visible {
			opacity: 0.7;
			visibility: visible;
		}
	}
</style>
