<script setup>
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { computed } from 'vue';
import { toCurrency } from 'src/filters';

import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';

import { useSummaryDialog } from 'src/composables/useSummaryDialog';
import { toTimeFormat } from 'filters/date.js';

const { t } = useI18n();
const router = useRouter();
const { viewSummary } = useSummaryDialog();

defineProps({
    rows: {
        type: Array,
        required: true,
        default: () => [],
    },
});

const columns = computed(() => [
    {
        label: t('list.id'),
        name: 'id',
        field: 'id',
        sortable: true,
        align: 'left',
    },
    {
        label: t('list.name'),
        name: 'name',
        field: 'name',
        sortable: true,
        align: 'left',
    },
    {
        label: t('list.agency'),
        name: 'agency',
        field: 'agencyModeName',
        sortable: true,
        align: 'left',
    },
    {
        label: t('zone.closing'),
        name: 'close',
        field: 'hour',
        sortable: true,
        align: 'left',
        format: (val) => toTimeFormat(val),
    },
    {
        label: t('list.price'),
        name: 'price',
        field: 'price',
        sortable: true,
        align: 'left',
        format: (val) => toCurrency(val),
    },
    {
        name: 'actions',
        align: 'left',
    },
]);

const redirectToZoneSummary = (id) => {
    router.push({ name: 'ZoneSummary', params: { id } });
};
</script>

<template>
    <div>
        <div class="header">
            <span>{{ t('zone.pageTitles.zones') }}</span>
        </div>
        <QTable
            :rows="rows"
            :columns="columns"
            @row-click="(_, row) => redirectToZoneSummary(row.id)"
            style="max-height: 400px"
        >
            <template #body-cell-actions="props">
                <QTd :props="props">
                    <div class="table-actions">
                        <QIcon
                            name="preview"
                            size="sm"
                            color="primary"
                            @click.stop="viewSummary(props.row.id, ZoneSummary)"
                        >
                            <QTooltip>{{ t('zoneClosingTable.preview') }}</QTooltip>
                        </QIcon>
                    </div>
                </QTd>
            </template>
        </QTable>
    </div>
</template>

<style scoped lang="scss">
.header {
    width: 100%;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    background-color: $primary;
}
</style>
