<template>
  <div class="glass-wrapper">
    <div class="glass-effect" :style="glassStyle"></div>
    <div class="glass-tint"></div>
    <div class="glass-shine"></div>
    <div class="glass-slot">
      <slot/>
    </div>

    <svg style="display: none">
      <filter
        id="glass-distortion"
        x="0%"
        y="0%"
        width="100%"
        height="100%"
        filterUnits="objectBoundingBox"
        >
        <feTurbulence
          type="fractalNoise"
          baseFrequency="0.01 0.01"
          numOctaves="1"
          seed="3"
          result="turbulence"
        />
        <!-- Seeds: 14, 17,  -->

        <feComponentTransfer in="turbulence" result="mapped">
          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />
          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />
          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />
        </feComponentTransfer>

        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

        <feSpecularLighting
          in="softMap"
          surfaceScale="5"
          specularConstant="1"
          specularExponent="100"
          lighting-color="white"
          result="specLight"
          >
          <fePointLight x="-200" y="-200" z="300" />
        </feSpecularLighting>

        <feComposite
          in="specLight"
          operator="arithmetic"
          k1="0"
          k2="1"
          k3="1"
          k4="0"
          result="litImage"
        />

        <feDisplacementMap
          in="SourceGraphic"
          in2="softMap"
          scale="150"
          xChannelSelector="R"
          yChannelSelector="G"
        />
      </filter>
    </svg>
  </div>
  
</template>

<script setup lang="ts">
  import { computed } from 'vue'

  const props = defineProps<{
    color?: string
  }>()

  const glassStyle = computed(() => ({
    '--glass-color': props.color ?? 'white'
  }))
</script>

<style scoped lang="scss">
.glass-wrapper {
  display: flex;
  position: relative;
  overflow: hidden;
  inset: 0;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 2.2);
}

.glass-effect {
  position: absolute;
  z-index: 0;
  inset: 0;
  backdrop-filter: blur(3px);
  /*  filter: url(#glass-distortion); */
  overflow: hidden;
}

.glass-tint {
  z-index: 1;
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.8);
}

.glass-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.5),
    inset 0px 0px 1px 1px rgba(255, 255, 255, 0.5);
}

.glass-slot {
  z-index: 3;
  overflow: hidden;
 }

</style>
