<script setup lang="ts">
import { renderQRCodeToCanvas } from "@/utils/renderer";
import { IMAGE_FORMATS, LOGOS } from "@/utils/settings";

const form = ref(null);
const qrCode = ref(undefined);

const copyUrlIcon = ref("i-heroicons-clipboard-document");
const copyBaseApiUrlIcon = ref("i-heroicons-clipboard-document");
const copyImageIcon = ref("i-heroicons-clipboard-document");
const copyImageLabel = ref("Copy");

const isQRCodeEmpty = computed(() => !qrCode.value);
const qrCodeSrc = computed(() => qrCode.value ?? "/default.webp");

const isApiModelOpen = ref(false);

const state = reactive({
  hasLogo: false,
  logo: undefined,
  format: IMAGE_FORMATS[0],
  content: undefined,
});

const firstBlured = ref(false);

const stateErrors = computed(() => ({
  content: firstBlured.value && !state.content,
  logo: firstBlured.value && state.hasLogo && !state.logo,
}));

const isValidState = computed(
  () =>
    state.content &&
    ((state.hasLogo && state.logo) || !state.hasLogo) &&
    state.format,
);

const BASE_API_URL = "https://simple-qr.com/api";

const apiUrl = computed(() => {
  if (!isValidState.value) return "";

  const params = new URLSearchParams({
    ...(state.hasLogo && { logo: state.logo }),
    format: state.format,
    content: state.content,
  });

  return `${BASE_API_URL}?${params}`;
});

const updateQRCode = async () => {
  await nextTick();

  if (!isValidState.value) return;

  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);

  qrCode.value = canvas.toDataURL(`image/${state.format}`);
};

const copyUrl = async () => {
  if (!isValidState.value) return;

  await navigator.clipboard.writeText(apiUrl.value);

  copyUrlIcon.value = "i-heroicons-clipboard-document-check";
  setTimeout(() => {
    copyUrlIcon.value = "i-heroicons-clipboard-document";
  }, 3000);
};

const copyBaseApiUrl = async () => {
  await navigator.clipboard.writeText(BASE_API_URL);

  copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document-check";
  setTimeout(() => {
    copyBaseApiUrlIcon.value = "i-heroicons-clipboard-document";
  }, 3000);
};

const downloadQRCode = () => {
  const link = document.createElement("a");
  link.href = qrCode.value;
  link.download = `qrcode.${state.format}`;

  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

const copyQRCode = async () => {
  if (isQRCodeEmpty.value) return;

  const logoUrl = state.hasLogo ? `/logos/${state.logo}.png` : undefined;
  const canvas = await renderQRCodeToCanvas(state.content, logoUrl);

  const qrCode = canvas.toDataURL(`image/png`);

  const blob = await (await fetch(qrCode)).blob();
  const item = new ClipboardItem({ "image/png": blob });
  await navigator.clipboard.write([item]);

  copyImageIcon.value = "i-heroicons-clipboard-document-check";
  copyImageLabel.value = "Copied!";
  setTimeout(() => {
    copyImageIcon.value = "i-heroicons-clipboard-document";
    copyImageLabel.value = "Copy";
  }, 3000);
};

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1);

const upperCase = (str: string) => str.toUpperCase();

const arrayToUnion = (array: string[]) =>
  array.map((x) => `"${x}"`).join(" | ");

const colorMode = useColorMode();
const isDark = computed({
  get() {
    return colorMode.value === "dark";
  },
  set() {
    colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
  },
});
</script>

<template>
  <div role="main" class="flex h-[100vh] items-center justify-center">
    <NuxtRouteAnnouncer />

    <div
      class="p-5 w-full max-w-[850px] flex flex-col justify-center space-y-4"
    >
      <div
        class="pb-1.5 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center"
      >
        <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>

        <div class="flex gap-x-1">
          <UButton
            color="gray"
            variant="ghost"
            icon="i-uil-github"
            aria-label="Github repo"
            class="w-8 h-8"
            target="_blank"
            to="https://github.com/pihkaal/simple-qr"
          />

          <ClientOnly>
            <UButton
              :icon="
                isDark
                  ? 'i-heroicons-moon-20-solid'
                  : 'i-heroicons-sun-20-solid'
              "
              color="gray"
              variant="ghost"
              aria-label="Theme"
              class="w-8 h-8"
              @click="isDark = !isDark"
            />
            <template #fallback>
              <div class="w-8 h-8" />
            </template>
          </ClientOnly>
        </div>
      </div>
      <div class="flex justify-between space-x-8">
        <img
          :src="qrCodeSrc"
          class="max-h-[375px] aspect-square border border-gray-100 dark:border-gray-800"
        >

        <div class="flex-1 flex flex-col justify-center">
          <UForm ref="form" :state="state" class="space-y-4">
            <UFormGroup
              label="Username or link"
              name="content"
              :error="stateErrors.content"
            >
              <UInput
                v-model="state.content"
                icon="i-heroicons-user"
                placeholder="Your username or profile link"
                @input="updateQRCode"
                @blur="firstBlured = true"
              />
            </UFormGroup>

            <UFormGroup name="logo" :error="stateErrors.logo">
              <template #label>
                <UCheckbox
                  v-model="state.hasLogo"
                  class="mb-1.5"
                  label="Logo"
                  @change="updateQRCode"
                  @blur="firstBlured = true"
                />
              </template>

              <USelectMenu
                v-model="state.logo"
                icon="i-heroicons-photo"
                :options="LOGOS"
                :disabled="!state.hasLogo"
                placeholder="Select logo"
                searchable
                clear-search-on-close
                @change="updateQRCode"
                @blur="firstBlured = true"
              >
                <template #label>
                  <span v-if="state.logo">{{ capitalize(state.logo) }}</span>
                </template>

                <template #option="props">
                  <span>{{ capitalize(props.option) }}</span>
                </template>
              </USelectMenu>
            </UFormGroup>

            <UFormGroup label="Format" name="format">
              <USelectMenu
                v-model="state.format"
                icon="i-heroicons-document-duplicate"
                :options="IMAGE_FORMATS"
                placeholder="Select format"
                @change="updateQRCode"
                @blur="firstBlured = true"
              >
                <template #label>
                  <span v-if="state.format">{{ upperCase(state.format) }}</span>
                </template>

                <template #option="props">
                  <span>{{ upperCase(props.option) }}</span>
                </template>
              </USelectMenu>
            </UFormGroup>

            <UFormGroup label="API">
              <template #hint>
                <UButton
                  size="md"
                  color="gray"
                  variant="link"
                  icon="i-heroicons-question-mark-circle"
                  @click="isApiModelOpen = true"
                />
              </template>

              <UButtonGroup size="sm" orientation="horizontal" class="w-full">
                <UInput
                  v-model="apiUrl"
                  disabled
                  placeholder="Please fill all fields first"
                  class="w-full"
                />
                <UButton
                  color="gray"
                  :disabled="!isValidState"
                  :icon="copyUrlIcon"
                  @click="copyUrl"
                />
              </UButtonGroup>
            </UFormGroup>

            <div class="flex space-x-4 pt-2">
              <UButton
                class="flex-1"
                block
                :icon="copyImageIcon"
                size="md"
                color="primary"
                variant="solid"
                :label="copyImageLabel"
                :trailing="false"
                :disabled="isQRCodeEmpty"
                @click="copyQRCode"
              />

              <UButton
                class="flex-1"
                block
                icon="i-heroicons-arrow-down-tray"
                size="md"
                color="primary"
                variant="solid"
                label="Download"
                :trailing="false"
                :disabled="isQRCodeEmpty"
                @click="downloadQRCode"
              />
            </div>
          </UForm>
        </div>
      </div>
    </div>

    <UModal v-model="isApiModelOpen">
      <UCard
        :ui="{
          ring: '',
          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
        }"
      >
        <template #header>
          <div class="flex items-center justify-between">
            <h3
              class="text-xl font-semibold leading-6 text-gray-900 dark:text-white"
            >
              API Documentation
            </h3>
            <UButton
              color="gray"
              variant="ghost"
              icon="i-heroicons-x-mark-20-solid"
              class="-my-1"
              @click="isApiModelOpen = false"
            />
          </div>
        </template>

        <div class="flex flex-col space-y-8">
          <p>
            You can easily generate QRCodes by using the API, with no rate
            limitation.
            <br >
            <br >
            If you are not sure how to use the API, you can fill the QRCode form
            and copy the generated API URL.
          </p>

          <div class="space-y-3">
            <h2 class="font-bold text-lg">Base API URL</h2>

            <UButtonGroup size="sm" orientation="horizontal" class="w-full">
              <UInput
                :model-value="BASE_API_URL"
                size="sm"
                class="w-full"
                disabled
                :ui="{ base: '!ps-12 !cursor-text font-mono' }"
              >
                <template #leading>
                  <span
                    class="text-white dark:text-gray-900 bg-primary py-0.5 -mx-1 px-2 text-xs rounded-sm"
                    >GET</span
                  >
                </template>
              </UInput>
              <UButton
                color="gray"
                :icon="copyBaseApiUrlIcon"
                @click="copyBaseApiUrl"
              />
            </UButtonGroup>
          </div>

          <div class="space-y-3">
            <h2 class="font-bold text-lg">Query parameters</h2>
            <div
              class="text-sm flex flex-col space-y-4 font-mono divide-y divide-gray-200 dark:divide-gray-800"
            >
              <div class="pt-1 flex justify-between gap-x-5">
                <span class="text-primary font-semibold">format</span>
                <span class="text-slate-700 dark:text-slate-200 text-right">{{
                  arrayToUnion(IMAGE_FORMATS)
                }}</span>
              </div>

              <div class="pt-4 flex justify-between gap-x-5">
                <span class="text-primary font-semibold">logo</span>
                <span class="text-slate-700 dark:text-slate-200 text-right">{{
                  arrayToUnion(LOGOS)
                }}</span>
              </div>

              <div class="pt-4 flex justify-between gap-x-5">
                <span class="text-primary font-semibold">content</span>
                <span class="text-slate-700 dark:text-slate-200 text-right"
                  >string</span
                >
              </div>
            </div>
          </div>
        </div>
      </UCard>
    </UModal>
  </div>
</template>
