<script lang="ts">
  import { fly } from "svelte/transition";
  export let msg;
  //export let duration;
  export let type;
  export let resolve;

  export let options = ["okay", "nope"];

  const gridCols = options.map((v) => "auto").join(" ");
</script>

<div transition:fly={{ duration: 500, x: -50 }} class={`wrapper type-${type}`}>
  <p>{@html msg}</p>

  {#if type === "confirm"}
    <div class="button-wrapper" style={`grid-template-columns: 1fr 1fr`}>
      <button on:click={() => resolve(true)} class="accept">okay</button>
      <button on:click={() => resolve(false)} class="reject">nope</button>
    </div>
  {/if}

  {#if type === "ask"}
    <div class="button-wrapper" style={`grid-template-columns: ${gridCols};`}>
      {#each options as opt}
        <button on:click={() => resolve(opt)}>{opt}</button>
      {/each}
    </div>
  {/if}
</div>

<style>
  .wrapper {
    outline: solid thin black;
    padding-top: 2.5px;
    margin: 5px;
    background-color: white;
    font-size: 1.2em;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  }

  .wrapper.type-warn {
    background-color: rgb(255, 255, 132);
  }

  .wrapper.type-warn > p::before,
  .wrapper.type-warn > p::after {
    content: "     !     ";
    font-weight: bold;
  }

  .button-wrapper {
    width: 100%;
    display: grid;
    border-top: solid thin black;
  }

  .button-wrapper > button {
    border-radius: 0px;
    background: none;
    height: 100%;
    padding: 0px;
    padding: 2px 5px;
    border: none;
    color: black;
    border-right: solid thin black;
  }

  .button-wrapper > button:last-child {
    border: none;
  }

  .accept {
    background-color: rgb(58, 255, 58) !important;
  }
  .reject {
    background-color: rgb(255, 51, 51) !important;
  }

  p {
    box-sizing: border-box;
    margin: 10px;
  }
</style>
