<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({
    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 full-width">
        <VnPaginate
            :data-key="$props.url"
            :url="$props.url"
            order="created DESC"
            :limit="20"
            :filter="$props.filter"
            auto-load
            ref="vnPaginateRef"
        >
            <template #body="{ rows }">
                <div class="column items-center full-width">
                    <QCard
                        class="q-pa-xs q-mb-sm full-width"
                        v-for="(note, index) in rows"
                        :key="index"
                    >
                        <QCardSection horizontal>
                            <slot name="picture">
                                <VnAvatar
                                    :descriptor="false"
                                    :worker-id="note.workerFk"
                                    size="md"
                                />
                            </slot>
                            <div class="full-width row justify-between q-pa-xs">
                                <VnUserLink
                                    :name="`${note.worker.user.nickname}`"
                                    :worker-id="note.worker.id"
                                />

                                <slot name="actions">
                                    {{ toDateHour(note.created) }}
                                </slot>
                            </div>
                        </QCardSection>
                        <QCardSection class="q-pa-xs q-my-none q-py-none">
                            <slot name="text">
                                {{ note.text }}
                            </slot>
                        </QCardSection>
                    </QCard>
                </div>
            </template>
        </VnPaginate>
        <QPageSticky position="bottom-right" :offset="[25, 25]" v-if="addNote">
            <QBtn 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 {
    width: 90%;
    @media (max-width: $breakpoint-sm) {
        width: 100%;
    }
    &__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>
