import { css, render_and_copy, svg_url } from "./common.tsx";

const svg = `
<svg id="filterSource" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <filter id="displacement" filterUnits="userSpaceOnUse">
      <!-- this is just a base64 encoded PNG with a simple linear gradient -->
      <!-- this may not be exactly what you want, but you can adjust the R and B channels to displace the element however you like. -->
      <feImage href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAdhAAAHYQGVw7i2AAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAGlJREFUaIHtz6ENwEAMxVBfUWn3H7Kw8LpCdMjAT/osIF7AZuAGnsMt4D3cN3kOuIZ3eoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNoXYFGJTiE0hNj9ceBBjuV6HJAAAAABJRU5ErkJggg==" result="dispMap" />
      <feDisplacementMap
        in="SourceGraphic"
        in2="dispMap"
        scale="10"
        xChannelSelector="B"
        yChannelSelector="R" />
    </filter>
  </svg>
`.trim();

render_and_copy(
    <div
        style={{
            display: css.inline_block,
            filter: css.url(svg_url(svg) + "#displacement"),
            height: css.rem(10),
        }}
    >
        yo what's up i am a chuckya
    </div>
);