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

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

<template>
  <ul class="list-group list-group-flush">
    <li
      class="list-group-item"
      v-for="(value, valueKey) in values"
      :key="value.id"
    >
      <div class="row">
        <div class="col d-flex align-items-center">
          <div
            class="list-icon me-1"
            :style="{ backgroundImage: `url('${iconBaseUrl + value[type].icon_url}'` }"
            v-if="value[type].icon_url"
          />
          <div>
            {{ value[type].name }}
          </div>
        </div>
        <div class="col">
          <div v-if="type == 'skill'">
            <div v-if="editable">
              <select
                v-if="editableValues[valueKey]"
                class="form-select form-select-sm"
                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.long || 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 form-select-sm"
                  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 form-control-sm" 
                maxlength="200" 
                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 text-end">
          <button
            v-if="editable"
            type="button"
            class="btn btn-sm btn-light"
            aria-label="Löschen"
            @click="$emit('removeValue', value[type].name)"
          >
            <i class="text-danger bi bi-x-circle"></i>
          </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 {
      iconBaseUrl: this.apiUrl,
      levelSelection: levelJson,
      languagesSelection: languagesJson,
      editableValues: this.values,
    };
  },
  watch: {
    values: function (newVal) {
      this.editableValues = newVal;
    },
  },
};
</script>

<style scope>
.list-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 32px;
  width: 32px;
}
</style>
