<!--
SPDX-FileCopyrightText: WTF Kooperative eG <https://wtf-eg.de/>

SPDX-License-Identifier: AGPL-3.0-or-later
-->

<template>
  <ul>
    <li v-for="(value, valueKey) in values" :key="value.id">
      <div class="row m-1">
        <div class="col">
          <img
            style="max-width: 64px"
            v-if="value[type].icon_url"
            :src="iconUrl + value[type].icon_url"
            :alt="`${value[type].name} Logo`"
          />
          {{ value[type].name }}
        </div>
        <div class="col">
          <div v-if="type == 'skill'">
            <div v-if="editable">
              <select
                v-if="editableValues[valueKey]"
                class="form-select"
                aria-label="Selektiere dein Level"
                v-model="editableValues[valueKey].level"
                @input="$emit('update-values', editableValues)"
              >
                <option
                  v-for="(value, key) in levelSelection"
                  :value="key"
                  :key="key"
                >
                  {{ value }}
                </option>
              </select>
            </div>
            <div v-else><span v-if="value.level">({{ levelSelection[value.level] }})</span></div>
          </div>
          <div v-else-if="type == 'language'">
            <div v-if="editable">
              <div v-if="editable">
              <select
                v-if="editableValues[valueKey]"
                class="form-select"
                aria-label="Selektiere dein Level"
                v-model="editableValues[valueKey].level"
                @input="$emit('update-values', editableValues)"
              >
                <option
                  v-for="(value, key) in languagesSelection"
                  :value="key"
                  :key="key"
                >
                  {{ value }}
                </option>
              </select>
            </div>
            </div>
            <div v-else><span v-if="value.level">({{languagesSelection[value.level]}})</span></div>
          </div>
          <div v-else-if="type == 'contacttype'">
            <div v-if="editable">
              <input class="form-control" v-model="editableValues[valueKey].content"/>
            </div>
            <div v-else>
              <span v-if="value[type].name === 'E-Mail'">
                <a :href="`mailto:${value.content}`">{{ value.content }}</a>
              </span>
              <span v-else>
                {{ value.content }}
              </span>
            </div>
          </div>
        </div>
        <div class="col">
          <button
            v-if="editable"
            type="button"
            class="btn btn-outline-danger"
            aria-label="Löschen"
            @click="$emit('removeValue', value[type].name)"
          >
            <img
              src="/img/bootstrap-icons-1.5.0/trash.svg"
              alt="Löschen Icon"
            />
          </button>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
import levelJson from "@/assets/skill_level.json";
import languagesJson from "@/assets/language_level.json";

export default {
  name: "ProfileList",
  props: {
    type: {
      type: String,
    },
    values: {
      type: Array,
      required: true,
    },
    editable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      iconUrl: this.apiUrl,
      levelSelection: levelJson,
      languagesSelection: languagesJson,
      editableValues: this.values,
    };
  },
  watch: {
    values: function (newVal) {
      this.editableValues = newVal;
    },
  },
};
</script>
