<script setup lang="ts">
import WizardPage from "@/components/onboarding/WizardPage.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { computed, ref, watch } from "vue";
import { useUserStore } from "@/stores/user";
import { useRoute } from "vue-router";
import { useTranslation } from "i18next-vue";
import { profileNextRoute, useEntities } from "@/services/onboarding";
import AvatarImage from "@/components/ui/AvatarImage.vue";

const { t } = useTranslation();

const user = useUserStore();
const route = useRoute();

const { organisations } = useEntities();

const selectedOrganisation = ref({
  id: 0,
  name: t("a.Auswählen"),
});

watch(
  organisations,
  (newOrganisations) => {
    if (newOrganisations) {
      const userOrganisation = newOrganisations.find((c) => c.id === user.organisation);
      if (userOrganisation) {
        selectedOrganisation.value = userOrganisation;
      }
    }
  },
  { immediate: true }
);

const validOrganisation = computed(() => {
  return selectedOrganisation.value.id !== 0;
});

const avatarError = ref(false);
const avatarLoading = ref(false);

async function avatarUpload(e: Event) {
  const { files } = e.target as HTMLInputElement;
  if (!files?.length) return;
  avatarLoading.value = true;
  avatarError.value = false;

  try {
    await user.setUserAvatar(files[0]);
  } catch (e) {
    avatarError.value = true;
  } finally {
    avatarLoading.value = false;
  }
}

watch(selectedOrganisation, async (organisation) => {
  await user.setUserOrganisation(organisation.id);
});

const nextRoute = computed(() => {
  return profileNextRoute(route.params.courseType);
});
</script>

<template>
  <WizardPage :step="1">
    <template #content>
      <h2 class="my-10">{{ $t("a.Profil ergänzen") }}</h2>

      <h3 class="mb-3">{{ $t("a.Gesellschaft") }}</h3>

      <p class="mb-6 max-w-md hyphens-none">
        {{
          $t(
            "a.Wähle hier den Namen der Gesellschaft aus, in der du arbeitest. So können dich andere Personen einfacher finden."
          )
        }}
      </p>

      <ItDropdownSelect v-model="selectedOrganisation" :items="organisations" />

      <div class="mt-16 flex flex-col justify-between gap-12 lg:flex-row lg:gap-24">
        <div>
          <h3 class="mb-3">{{ $t("a.Profilbild") }}</h3>
          <p class="mb-6 max-w-md hyphens-none">
            {{
              $t(
                "a.Lade ein Profilbild hoch, damit dich andere Personen auf den ersten Blick erkennen."
              )
            }}
          </p>
          <div class="btn-primary relative inline-flex cursor-pointer items-center">
            <input
              id="upload"
              type="file"
              class="absolute opacity-0"
              accept="image/*"
              :disabled="avatarLoading"
              @change="avatarUpload"
            />
            {{ $t("a.Bild hochladen") }}
            <it-icon-upload class="it-icon ml-2 h-6 w-6" />
          </div>
          <p v-if="avatarError" class="mt-3 text-red-700">
            {{ $t("a.Datei kann nicht gespeichert werden.") }}
          </p>
        </div>
        <AvatarImage :loading="avatarLoading" :image-url="user.avatar_url" />
      </div>
    </template>

    <template #footer>
      <router-link v-slot="{ navigate }" :to="{ name: nextRoute }" custom>
        <button
          :disabled="!validOrganisation"
          class="btn-blue flex items-center"
          role="link"
          @click="navigate"
        >
          {{ $t("general.next") }}
          <it-icon-arrow-right class="it-icon ml-2 h-6 w-6" />
        </button>
      </router-link>
    </template>
  </WizardPage>
</template>
