<script lang="ts">
  import { fade } from "svelte/transition";
  import { countPixels } from "../helpers";
  export let img: Image;

  import { quartInOut } from "svelte/easing";

  let correctDistortion = true;

  function scaleX(node, { duration, delay }) {
    return {
      delay,
      duration,
      css: (t) => {
        const eased = quartInOut(t);

        return `
					transform: scaleX(${eased});`;
      },
    };
  }

  const prom = countPixels(img, correctDistortion);
</script>

<div id="header">
  <h3>ANALYZER</h3>
  <label for="correct-distort">Correct Distortion</label>
  <input
    id="correct-distort"
    type="checkbox"
    bind:checked={correctDistortion}
  />
</div>

{#await prom}
  <p>Loading...</p>
{:then result}
  <div class="list">
    {#each result as color, i}
      <p>
        {Math.floor(
          (correctDistortion ? color.value : color.distortedValue) * 10000
        ) / 100}%
      </p>
      <div
        transition:scaleX={{ duration: 500, delay: i * 200 }}
        class="bar"
        style={`width: ${
          (correctDistortion ? color.value : color.distortedValue) * 100
        }%; background-color:${color.color}`}
      />
    {/each}
  </div>
{/await}

<style>
  #header {
    display: flex;
    align-items: center;
  }

  #header > label {
    margin-left: 10px;
  }

  #header > input {
    margin: 0px;
    margin-left: 5px;
  }

  .list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: min-content 1fr;
  }

  .list > p {
    margin: 0;
    text-align: right;
    padding-right: 10px;
  }

  .bar {
    height: 20px;
    margin-bottom: 20px;
    transform-origin: 0px 0px;
    transition: width 0.3s ease;
  }
</style>
