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

import COLORS from "../../colors";
import TEMPLATES from "../../templates";
import DEFAULT_CONTRACTOR from "../../contractors";
import {
  generateDefaultLogos,
  LOGO_POSITIONS,
  generateLogoPositions,
} from "../../logos";
import {
  loadFonts,
  loadCanvasStorage,
  setCanvasStorage,
  updateAutoRedrawStorage,
} from "../../utils";

import defaultDarkLogoImage from "../../assets/logos/default-dark.png";

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

import Navbar from "../../components/Navbar.vue";
import MainContainer from "../../components/MainContainer.vue";
import LongTextInput from "../../components/inputs/text/LongTextInput.vue";
import ShortTextInput from "../../components/inputs/text/ShortTextInput.vue";
import PersonInput from "./PersonInput.vue";
import SelectInput from "../../components/inputs/SelectInput.vue";
import ReloadButton from "../../components/reload/ReloadButton.vue";
import AutoReloadCheckbox from "../../components/reload/AutoReloadCheckbox.vue";

import klaraImage from "../../assets/template/twitter_banner/klara.png";
import ivanImage from "../../assets/template/twitter_banner/ivan.png";
import jakubImage from "../../assets/template/twitter_banner/jakub.png";
import lipoImage from "../../assets/template/twitter_banner/lipo.png";
import olgaImage from "../../assets/template/twitter_banner/olga.png";

import twitterLogoImage from "../../assets/template/twitter_banner/twitter.png";
</script>

<script>
await loadFonts(["12px Bebas Neue", "12px Roboto Condensed", "12px Roboto"]);

export default {
  components: {
    Canvas,
    Navbar,
    MainContainer,
    LongTextInput,
    ShortTextInput,
    PersonInput,
  },
  data() {
    const personOptions = {
      klara: {
        title: "Klára Kocmanová",
        personTwitter: "KlaraKocmanova",
        mainImage: klaraImage,
      },
      ivan: {
        title: "Ivan Bartoš",
        personTwitter: "PiratIvanBartos",
        mainImage: ivanImage,
      },
      jakub: {
        title: "Jakub Michálek",
        personTwitter: "JakubMichalek19",
        mainImage: jakubImage,
      },
      lipo: {
        title: "Jan Lipavský",
        personTwitter: "JanLipavsky",
        mainImage: lipoImage,
      },
      olga: {
        title: "Olga Richterová",
        personTwitter: "olgarichterova",
        mainImage: olgaImage,
      },
    };

    return {
      defaultSelection: personOptions.klara,
      personOptions: personOptions,
      mainImage: null,
      mainText: null,
      personName: null,
      personTwitter: null,
      contractedBy: DEFAULT_CONTRACTOR,
      logoImageSource: defaultDarkLogoImage,
      logoPosition: LOGO_POSITIONS.bottom_left,
      logoOptions: generateLogoPositions(["bottom_left", "top_left"]),
      twitterLogoImageSource: twitterLogoImage,
      colors: {
        background: COLORS.white,
        text: COLORS.black,
        highlight: COLORS.yellow1,
        highlightedText: COLORS.black,
        contractedByText: COLORS.gray2,
      },
      autoRedraw: false,
    };
  },
  async created() {
    await loadCanvasStorage(this);
  },
  methods: {
    async reloadCanvasProperties() {
      const canvasProperties = {
        colors: this.colors,
        logoImageSource: this.logoImageSource,
        logoPosition: this.logoPosition,
        twitterLogoImageSource: this.twitterLogoImageSource,
        mainImage: this.mainImage,
        mainText: this.mainText,
        personName: this.personName,
        personTwitter: this.personTwitter,
        contractedBy: this.contractedBy,
      };

      if (canvasProperties.mainText) {
        window.fileName = canvasProperties.mainText;
      }

      await this.$refs.canvas.redraw(canvasProperties);

      delete canvasProperties.colors;
      setCanvasStorage(canvasProperties);
    },
  },
  mounted() {
    this.$watch(
      (vm) => [
        vm.colors,
        vm.logoImageSource,
        vm.logoPosition,
        vm.twitterLogoImageSource,
        vm.mainImage,
        vm.mainText,
        vm.personName,
        vm.personTwitter,
        vm.contractedBy,
      ],
      async (value) => {
        if (this.autoRedraw) {
          await this.reloadCanvasProperties();
        }
      },
      {
        immediate: true,
        deep: true,
      },
    );

    this.$watch(
      (vm) => [vm.autoRedraw],
      async (value) => {
        updateAutoRedrawStorage(this.autoRedraw);

        if (this.autoRedraw) {
          await this.reloadCanvasProperties();
        }
      },
    );
  },
};
</script>

<template>
  <header>
    <Navbar :defaultTemplate="TEMPLATES.twitter_banner"></Navbar>
  </header>
  <main>
    <MainContainer>
      <template v-slot:left>
        <Canvas
          ref="canvas"
          :redrawFunction="redraw"
          width="2000"
          height="2000"
        />
      </template>

      <template v-slot:right>
        <ReloadButton :parentRefs="$refs" @click="reloadCanvasProperties" />
        <AutoReloadCheckbox v-model="autoRedraw" />
        <PersonInput
          name="Osoba"
          v-model:mainImage="mainImage"
          v-model:personName="personName"
          v-model:personTwitter="personTwitter"
          :defaultSelection="defaultSelection"
          :options="Object.values(personOptions)"
          :important="true"
          zIndex="10"
        />
        <LongTextInput
          name="Text"
          v-model="mainText"
          :important="true"
          zIndex="9"
        />

        <SelectInput
          name="Pozice loga"
          :options="logoOptions"
          v-model="logoPosition"
          zIndex="8"
        />

        <ShortTextInput
          name="Zadavatel a zpracovatel"
          v-model="contractedBy"
          :defaultValue="DEFAULT_CONTRACTOR"
          :important="false"
          zIndex="4"
        />
      </template>
    </MainContainer>
  </main>
</template>

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