<template>
  <BaseDialog
    :model-value="modelValue"
    @update:model-value="$emit('update:modelValue', $event)"
    :title="`${$t('tagHistory.title')} ${member ? member.firstName + ' ' + member.lastName : ''}`"
    size="medium"
    @close="handleClose"
  >
    <div class="tag-history-content">
      <div class="form-group">
        <label>{{ $t('tagHistory.selectTags') }}</label>
        <multiselect 
          v-model="localSelectedTags" 
          :options="activityTags"
          :placeholder="$t('tagHistory.selectTags')" 
          label="name" 
          track-by="id" 
          multiple 
          :close-on-select="false"
          :taggable="false" 
          @select="$emit('select-tag', $event)" 
          :allow-empty="false" 
        />
      </div>
      <div v-if="tagHistory && tagHistory.length" class="tag-history-list">
        <div v-for="tag in tagHistory" :key="tag.id" class="tag-history-item">
          <div class="tag-header">{{ tag.name }}</div>
          <ul class="tag-list">
            <li v-for="entry in tag.diaryMemberTags" :key="entry.id">
              {{ formatDate(entry.diaryDates.date) }}
            </li>
          </ul>
        </div>
      </div>
      <div v-else class="no-history">
        <em>{{ $t('tagHistory.noHistory') }}</em>
      </div>
    </div>
  </BaseDialog>
</template>

<script>
import BaseDialog from './BaseDialog.vue';
import Multiselect from 'vue-multiselect';

export default {
  name: 'TagHistoryDialog',
  components: {
    BaseDialog,
    Multiselect
  },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    member: {
      type: Object,
      default: null
    },
    tagHistory: {
      type: Array,
      default: () => []
    },
    selectedTags: {
      type: Array,
      default: () => []
    },
    activityTags: {
      type: Array,
      default: () => []
    }
  },
  emits: ['update:modelValue', 'close', 'select-tag', 'update:selectedTags'],
  data() {
    return {
      localSelectedTags: this.selectedTags
    };
  },
  watch: {
    selectedTags(newVal) {
      this.localSelectedTags = newVal;
    },
    localSelectedTags(newVal) {
      this.$emit('update:selectedTags', newVal);
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:modelValue', false);
      this.$emit('close');
    },
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleDateString('de-DE');
    }
  }
};
</script>

<style scoped>
.tag-history-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-weight: 600;
  color: var(--text-color);
}

.tag-history-list {
  margin-top: 1rem;
}

.tag-history-item {
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: var(--background-light);
  border-radius: 4px;
}

.tag-header {
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--primary-color);
}

.tag-list {
  list-style: none;
  padding-left: 1rem;
  margin: 0;
}

.tag-list li {
  padding: 0.25rem 0;
  color: var(--text-muted);
}

.no-history {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}
</style>

