<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { blackAndWhite, grayScale } from '../processing/gray-scale.ts';
import ImageCollection from './ImageCollection.vue';

const canvas = ref<HTMLCanvasElement | null>(null);
const currentWidth = ref(100);
const currentHeight = ref(100);
let img: HTMLImageElement;
let ctx: CanvasRenderingContext2D;
onMounted(() => {
  ctx = canvas.value!.getContext('2d')!;
})

function onSelected(image: HTMLImageElement): void {
  canvas.value!.width = image.width;
  canvas.value!.height = image.height;
  ctx.drawImage(image, 0, 0);
  img = image;
}

function grayScaleApply() {
  const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
  const pixels = imageData.data;
  grayScale(pixels);
  ctx.putImageData(imageData, 0, 0);
}

function blackAndWhiteApply() {
  const imageData = ctx.getImageData(0, 0, canvas.value!.width, canvas.value!.height);
  const pixels = imageData.data;
  blackAndWhite(pixels);
  ctx.putImageData(imageData, 0, 0);
}

function onChangeSlideWidth() {
  const width = currentWidth.value / 100 * img.width;
  canvas.value!.width = width;
  ctx.drawImage(img, 0, 0, width, canvas.value!.height);
} 

function onChangeSlideHeight() {
  const height = currentHeight.value / 100 * img.height;
  canvas.value!.height = height;
  ctx.drawImage(img, 0, 0, canvas.value!.width, height);
}
</script>

<template>
  <div class="editor">
    <ImageCollection @selected="onSelected" />
    <div class="working-area">
      <div class="options">
        <button @click="blackAndWhiteApply">
          Black and white
        </button>
        <button @click="grayScaleApply">
          Gray-scale
        </button>
      </div>
      <div class="inner">
        <input v-model="currentHeight" type="range" min="1" max="200" value="100" orient="vertical" @change="onChangeSlideHeight">
        <div class="preview">
          <canvas ref="canvas"></canvas>
        </div>
      </div>
      <div class="controls">
        <input id="image-width" v-model="currentWidth" type="range" min="1" max="200" @change="onChangeSlideWidth">
        <output for="image-width">{{ currentWidth }}%</output>
      </div>
    </div>
  </div>
</template>

<style>
.editor {
  display: flex;
  box-shadow: 0 0 2px 2px #1a1a1a;
  padding: 8px;
  height: calc(100vh - 96px);
}
.working-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.inner {
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.preview {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
canvas {
  max-width: 100%;
  max-height: 100%;
}
input[type=range][orient=vertical] {
  appearance: slider-vertical;
}
output {
  vertical-align: top;
}
</style>
