<script setup>
import VnAvatar from 'src/components/ui/VnAvatar.vue';
import { toDateHourMin } from 'src/filters';
import { ref } from 'vue';
import axios from 'axios';
import { useI18n } from 'vue-i18n';
import VnPaginate from './VnPaginate.vue';
import VnUserLink from '../ui/VnUserLink.vue';
import { useState } from 'src/composables/useState';

const $props = defineProps({
    url: { type: String, default: null },
    filter: { type: Object, default: () => {} },
    body: { type: Object, default: () => {} },
    addNote: { type: Boolean, default: false },
});

const { t } = useI18n();
const state = useState();
const currentUser = ref(state.getUser());
const newNote = ref('');
const vnPaginateRef = ref();
function handleKeyUp(event) {
      if (event.key === 'Enter') {
        event.preventDefault();
        if (!event.shiftKey) insert();
    }
}
async function insert() {
    const body = $props.body;
    Object.assign(body, { text: newNote.value });
    await axios.post($props.url, body);
    await vnPaginateRef.value.fetch();
    newNote.value = '';
}
</script>
<template>
    <QCard class="q-pa-xs q-mb-xl full-width" v-if="$props.addNote">
        <QCardSection horizontal>
            <VnAvatar :worker-id="currentUser.id" size="md" />
            <div class="full-width row justify-between q-pa-xs">
                <VnUserLink :name="t('New note')" :worker-id="currentUser.id" />
                {{ t('globals.now') }}
            </div>
        </QCardSection>
        <QCardSection class="q-pa-xs q-my-none q-py-none" horizontal>
            <QInput
                v-model="newNote"
                class="full-width"
                type="textarea"
                :label="t('Add note here...')"
                filled
                size="lg"
                autogrow
                autofocus
                @keyup="handleKeyUp"
                clearable
            >
                <template #append>
                    <QBtn
                        :title="t('Save (Enter)')"
                        icon="save"
                        color="primary"
                        flat
                        @click="insert"
                    />
                </template>
            </QInput>
        </QCardSection>
    </QCard>
    <VnPaginate
        :data-key="$props.url"
        :url="$props.url"
        order="created DESC"
        :limit="0"
        :filter="$props.filter"
        auto-load
        ref="vnPaginateRef"
        class="show"
        v-bind="$attrs"
    >
        <template #body="{ rows }">
            <TransitionGroup name="list" tag="div" class="column items-center full-width">
                <QCard
                    class="q-pa-xs q-mb-sm full-width"
                    v-for="(note, index) in rows"
                    :key="note.id ?? index"
                >
                    <QCardSection horizontal>
                        <VnAvatar
                            :descriptor="false"
                            :worker-id="note.workerFk"
                            size="md"
                        />
                        <div class="full-width row justify-between q-pa-xs">
                            <VnUserLink
                                :name="`${note.worker.user.nickname}`"
                                :worker-id="note.worker.id"
                            />
                            {{ toDateHourMin(note.created) }}
                        </div>
                    </QCardSection>
                    <QCardSection class="q-pa-xs q-my-none q-py-none">
                        {{ note.text }}
                    </QCardSection>
                </QCard>
            </TransitionGroup>
        </template>
    </VnPaginate>
</template>
<style lang="scss" scoped>
.q-card {
    width: 90%;
    @media (max-width: $breakpoint-sm) {
        width: 100%;
    }
    &__section {
        word-wrap: break-word;
    }
}
.q-dialog .q-card {
    width: 400px;
}
.list-enter-active,
.list-leave-active {
    transition: all 1s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    background-color: $primary;
}
</style>
<i18n>
    es:
        Add note here...: Añadir nota aquí...
        New note: Nueva nota
        Save (Enter): Guardar (Intro)

</i18n>
