<script setup>
import { watch, ref } from "vue";

import Canvas from "../../components/canvas/Canvas.vue";
import redraw from "./canvas";

import Navbar from "../../components/Navbar.vue";
import MainContainer from "../../components/MainContainer.vue";
import ImageInput from "../../components/inputs/ImageInput.vue";
import ReloadButton from "../../components/reload/ReloadButton.vue";
import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";

import { toRawDeep } from "../../utils";
</script>

<script>
export default {
  components: {
    Canvas,
    Navbar,
    MainContainer,
    ImageInput,
  },
  data() {
    return {
      mainImage: null,
      autoRedraw: true,
    };
  },
  methods: {
    async reloadCanvasProperties() {
      const canvasProperties = {
        mainImage: this.mainImage,
      };

      await this.$refs.canvas.redraw(canvasProperties);
    },
  },
  mounted() {
    window.fileName = "Profilovy obrazek.png";

    this.$watch(
      (vm) => [vm.mainImage],
      async (value) => {
        if (this.autoRedraw) {
          await this.reloadCanvasProperties();
        }
      },
      {
        immediate: true,
        deep: true,
      },
    );
  },
};
</script>

<template>
  <header>
    <Navbar sideText="Profilové obrázky"></Navbar>
  </header>
  <main>
    <MainContainer>
      <template v-slot:left>
        <Canvas
          ref="canvas"
          :redrawFunction="redraw"
          width="750"
          height="750"
        />
      </template>

      <template v-slot:right>
        <ImageInput
          name="Obrázek"
          v-model="mainImage"
          :important="true"
          zIndex="10"
        />

        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
        <AutoReloadCheckbox v-model="autoRedraw" />
      </template>
    </MainContainer>
  </main>
</template>

<style>
@import "vue-select/dist/vue-select.css";
</style>
