<template>
    <ContentLayout :title="layout.title" :actions="layout.action" @onCreate="onCreate">
        <template #body>
            <div class="content-search">
                <DateSelector id="report-date" v-model="selectedDate" :classValue="`w-full`" :isBS="true" />
            </div>
            <Tabulator
                :columns="headerDetails"
                :data="itemList"
                :heightOffset="250"
                :action="true"
                placeholder="No Darta Found"
            />
        </template>
    </ContentLayout>

    <Create />
</template>

<script setup lang="ts">
import { ref } from "vue";
import { BStoAD, NepaliDate } from "nepali-date-library";
import { storeToRefs } from "pinia";
import Create from "@/views/Darta/Create.vue";
import { createGenericStore } from "@/stores/GenericStore";
import { createOverlayStore } from "@/stores/OverlayStore";

const DartaStore = createGenericStore("darta")();
const DartaTowserStore = createOverlayStore("darta-towser")();

const { itemList } = storeToRefs(DartaStore);

const layout = ref({
    title: [{ name: "Darta" }],
    action: [{ title: "Create", emit: "onCreate" }]
});

const selectedDate = ref(BStoAD(new NepaliDate().format("YYYY-MM-DD")));

const headerDetails = [
    { field: "document_no", title: "Document Number", headerFilter: true, headerFilterPlaceholder: "Search" },
    { field: "sender_name", title: "Sender", headerFilter: true, headerFilterPlaceholder: "Search" },
    { field: "receiver_name", title: "Receiver", headerFilter: true, headerFilterPlaceholder: "Search" },
    { field: "received_date", title: "Received Date" },
    { field: "is_active", title: "Status", width: "250" },
];

const onCreate = () => {
    DartaTowserStore.open();
};
</script>