<script lang="ts">
    import { onDestroy, setContext, SvelteComponent } from 'svelte';

	let visible = false;
    let onClose: Function;
    let props = {};
    let component: ConstructorOfATypedSvelteComponent | undefined;
    function show(c : ConstructorOfATypedSvelteComponent, p: Object) {
        visible = true
        component = c
        props = p
    }
    function close(){
        visible=false
        component = undefined;
        props = {}
        onClose()
    }
    setContext('modal', {show, close})
    
	function keyPress(e: KeyboardEvent) {
		if (e.key == 'Escape' && visible == true) {
			visible = false;
		}
	}
    
</script>

<slot />
<div id="topModal" class:visible on:click={() => close()} on:keypress={keyPress}>
	<div id="modal" on:click|stopPropagation={()=>{}} on:keypress={()=>{}}>
		<svelte:component this={component} {...props}/>
	</div>
</div>


<style>
	#topModal {
		visibility: hidden;
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #4448;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#modal {
		position: relative;
		border-radius: 6px;
		background: white;
		border: 2px solid #000;
		filter: drop-shadow(5px 5px 5px #555);
		padding: 1em;
	}

	.visible {
		visibility: visible !important;
	}

	/* #modal-content {
		max-width: calc(100vw - 20px);
		max-height: calc(100vh - 20px);
		overflow: auto;
	} */
</style>
