<template>
  <BaseSetting title="Vereins Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
    <div class="w-full">
      <label for="clubname">Vereins-Name (optional)</label>
      <input id="clubname" type="text" :readonly="!enableEdit" :value="clubSettings['club.name']" />
    </div>
    <div class="w-full">
      <label for="imprint">Vereins-Impressum Link (optional)</label>
      <input id="imprint" type="url" :readonly="!enableEdit" :value="clubSettings['club.imprint']" />
    </div>
    <div class="w-full">
      <label for="privacy">Vereins-Datenschutz Link (optional)</label>
      <input id="privacy" type="url" :readonly="!enableEdit" :value="clubSettings['club.privacy']" />
    </div>
    <div class="w-full">
      <label for="website">Vereins-Webseite Link (optional)</label>
      <input id="website" type="url" :readonly="!enableEdit" :value="clubSettings['club.website']" /></div
  ></BaseSetting>
</template>

<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useSettingStore } from "@/stores/admin/management/setting";
import AppIcon from "@/components/AppIcon.vue";
import AppLogo from "@/components/AppLogo.vue";
import { useAbilityStore } from "@/stores/ability";
import type { SettingString } from "@/types/settingTypes";
import BaseSetting from "./BaseSetting.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      overwriteIcon: false as boolean,
      overwriteLogo: false as boolean,
    };
  },
  computed: {
    ...mapState(useSettingStore, ["readByTopic"]),
    ...mapState(useAbilityStore, ["can"]),
    clubSettings() {
      return this.readByTopic("club");
    },
  },
  methods: {
    ...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
    previewImage(inputname: "icon" | "logo") {
      let input = this.$refs[inputname] as HTMLInputElement;
      let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
      if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = function (e) {
          previewElement.src = e.target?.result as string;
          previewElement.style.display = "block";
        };

        reader.readAsDataURL(input.files[0]);
      } else {
        previewElement.src = "";
        previewElement.style.display = "none";
      }
    },
    submit(e: any) {
      const formData = e.target.elements;
      return this.updateSettings([
        {
          key: "club.name",
          value: formData.clubname.value || null,
        },
        {
          key: "club.imprint",
          value: formData.imprint.value || null,
        },
        {
          key: "club.privacy",
          value: formData.privacy.value || null,
        },
        {
          key: "club.website",
          value: formData.website.value || null,
        },
      ]);
    },
  },
});
</script>
