<template>
    <section class="diary-sidebar-section">
        <h3 class="clickable" @click="$emit('toggle-box')">
            {{ $t('diary.activities') }} ({{ activities.length }}) <span>{{ showActivitiesBox ? '-' : '+' }}</span>
        </h3>
        <div v-if="showActivitiesBox" class="collapsible-box">
            <textarea :value="newActivity" @input="$emit('update:newActivity', $event.target.value)"></textarea>
            <button @click="$emit('add-activity')">{{ $t('diary.addActivity') }}</button>
            <ul v-if="activities.length">
                <li v-for="activity in activities" :key="activity.id">
                    {{ activity.description }}
                </li>
            </ul>
            <div v-else class="activity-empty-state">{{ $t('diary.noFreeActivitiesYet') }}</div>
            <multiselect
                :model-value="selectedActivityTags"
                :options="availableTags"
                :placeholder="$t('diary.selectTags')"
                label="name"
                track-by="id"
                multiple
                :close-on-select="true"
                :allow-empty="false"
                @update:model-value="$emit('update:selectedActivityTags', $event)"
                @tag="$emit('add-tag', $event)"
                @remove="$emit('remove-tag', $event)"
                @keydown.enter.prevent="$emit('add-tag-from-input')"
            />
        </div>
    </section>
</template>

<script>
import Multiselect from 'vue-multiselect';

export default {
    name: 'DiaryActivitiesPanel',
    components: {
        Multiselect
    },
    props: {
        showActivitiesBox: {
            type: Boolean,
            required: true
        },
        newActivity: {
            type: String,
            required: true
        },
        activities: {
            type: Array,
            required: true
        },
        availableTags: {
            type: Array,
            required: true
        },
        selectedActivityTags: {
            type: Array,
            required: true
        }
    },
    emits: [
        'toggle-box',
        'update:newActivity',
        'add-activity',
        'update:selectedActivityTags',
        'add-tag',
        'remove-tag',
        'add-tag-from-input'
    ]
};
</script>

<style scoped>
.diary-sidebar-section {
    margin-top: 1rem;
}

.activity-empty-state {
    padding: 0.7rem 0.75rem;
    border-radius: 10px;
    background: var(--surface-muted);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
</style>
