<script setup>
import VnAvatar from 'src/components/ui/VnAvatar.vue';
import { toDateHour } 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';

const $props = defineProps({
    id: { type: String, required: true },
    url: { type: String, default: null },
    filter: { type: Object, default: () => {} },
    body: { type: Object, default: () => {} },
    addNote: { type: Boolean, default: false },
});
const { t } = useI18n();
const noteModal = ref(false);
const newNote = ref('');
const vnPaginateRef = ref();

async function insert() {
    const body = $props.body;
    Object.assign(body, { text: newNote.value });
    await axios.post($props.url, body);
    vnPaginateRef.value.fetch();
    newNote.value = '';
}
</script>
<template>
    <div class="column items-center full-height">
        <VnPaginate
            :data-key="$props.url"
            :url="$props.url"
            order="created DESC"
            :limit="20"
            :filter="$props.filter"
            auto-load
            ref="vnPaginateRef"
        >
            <template #body="{ rows }">
                <QCard class="q-pa-md q-mb-md" v-for="(note, index) in rows" :key="index">
                    <QCardSection horizontal>
                        <slot name="picture">
                            <VnAvatar :descriptor="false" :worker-id="note.workerFk" />
                        </slot>
                        <QItem class="full-width justify-between items-start">
                            <VnUserLink
                                :name="`${note.worker.firstName} ${note.worker.lastName}`"
                                :worker-id="note.worker.id"
                            />

                            <slot name="actions">
                                {{ toDateHour(note.created) }}
                            </slot>
                        </QItem>
                    </QCardSection>
                    <QCardSection>
                        <slot name="text">
                            {{ note.text }}
                        </slot>
                    </QCardSection>
                </QCard>
            </template>
        </VnPaginate>
        <QPageSticky position="bottom-right" :offset="[25, 25]">
            <QBtn
                v-if="addNote"
                color="primary"
                icon="add"
                size="lg"
                round
                @click="noteModal = true"
            />
        </QPageSticky>
        <QDialog v-model="noteModal" @hide="newNote = ''">
            <QCard>
                <QCardSection>
                    <QItem class="q-px-none">
                        <span class="text-primary text-h6 full-width">
                            <QIcon name="draft" class="q-mr-xs" />
                            {{ t('Add note') }}
                        </span>
                        <QBtn icon="close" flat round dense v-close-popup />
                    </QItem>
                </QCardSection>
                <QCardSection>
                    <QInput
                        autofocus
                        type="textarea"
                        :label="t('Add note here...')"
                        filled
                        size="lg"
                        autogrow
                        v-model="newNote"
                    ></QInput>
                </QCardSection>
                <QCardActions class="justify-end q-mr-sm">
                    <QBtn
                        flat
                        :label="t('globals.close')"
                        color="primary"
                        v-close-popup
                    />
                    <QBtn
                        :label="t('globals.save')"
                        color="primary"
                        v-close-popup
                        @click="insert"
                    />
                </QCardActions>
            </QCard>
        </QDialog>
    </div>
</template>
<style lang="scss" scoped>
.q-card {
    max-width: 80em;

    &__section {
        word-wrap: break-word;
    }
}
.q-dialog .q-card {
    width: 400px;
}
</style>
<i18n>
    es:
        Add note here...: Añadir nota aquí...
        Add note: Añadir nota
</i18n>
