<script
    setup
    lang="ts"
>
    import { ref } from 'vue';

    const { commentString } = defineProps<{
        commentString: string;
    }>();

    const emit = defineEmits<{
        clickClose: [];
        clickSave: [comment: string];
    }>();

    const text = ref(commentString);

    const close = () => {
        emit('clickClose');
        text.value = '';
    }

    const save = () => {
        emit('clickSave', text.value);
        close();
    }
</script>

<template>
    <q-card class="full-width">
        <div class="row items-center justify-between q-pa-md">
            {{ $t('timesheet.fields.header_comment') }}
        </div>
        <q-separator />
        <div class="q-pa-md">
            <q-input
                v-model="text"
                type="textarea"
                autogrow
                filled
                :label="$t('timesheet.fields.textarea_comment')"
                :counter=true
                maxlength="512"
                color="primary"
            />
        </div>
        <div class="row justify-end q-gutter-sm q-pa-sm">
            <q-btn
                color="secondary"
                text-color="grey-8"
                :label="$t('timesheet.cancel_button')"
                @click="close"
            />
            <q-btn
                :label="$t('timesheet.save_button')"
                color="primary"
                @click="save"
            />
        </div>
    </q-card>
</template>