<script lang="ts" context="module">
  export type NailState = {
    angle: number;
    length: number;
    visible: boolean;
  };
</script>

<script lang="ts">
  import { getContext } from "svelte";
  import { DIAL } from "./Dial.svelte";
  import { writable } from "svelte/store";
  import { elasticOut, elasticIn } from "svelte/easing";

  const state = writable<NailState>({
    angle: 0,
    length: 0,
    visible: false,
  });

  function slide(node: any, { delay = 0, duration = 1000 }) {
    return {
      delay,
      easing: elasticOut,
      duration,
      css: (t: number) =>
        `transform: rotate(${$state.angle}deg) translateX(${
          t * $state.length
        }px) scale(${t}); opacity: ${t}`,
    };
  }

  const ctx: any = getContext(DIAL);
  if (ctx) ctx.registerNail(state);
</script>

{#if $state.visible}
  <div
    transition:slide
    style="transform: rotate({$state.angle}deg) translateX({$state.length}px);"
    class="rel"
  >
    <div style="transform: rotate({-$state.angle}deg)" class="abs">
      <slot />
    </div>
  </div>
{/if}

<style>
  .rel {
  }

  .abs {
  }
</style>
