<script setup>
import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router';
import FetchData from 'components/FetchData.vue';
import { ref } from 'vue';
import CrudModel from 'components/CrudModel.vue';
import RoadmapAddStopForm from 'pages/Route/Roadmap/RoadmapAddStopForm.vue';

const { t } = useI18n();
const route = useRoute();
const roadmapStopsCrudRef = ref(null);

const defaultStop = ref({
    roadmapFk: Number(route.params?.id) || 0,
    eta: new Date().toISOString(),
});

const updateDefaultStop = (data) => {
    const eta = new Date(data.etd);
    eta.setDate(eta.getDate() + 1);
    defaultStop.value.eta = eta.toISOString();
};
</script>
<template>
    <FetchData
        :url="`Roadmaps/${route.params?.id}`"
        auto-load
        :filter="{ fields: ['etd'] }"
        @on-fetch="updateDefaultStop"
    />
    <div class="q-pa-lg">
        <CrudModel
            ref="roadmapStopsCrudRef"
            data-key="RoadmapStops"
            url="RoadmapStops"
            model="RoadmapStops"
            :filter="{ where: { roadmapFk: route.params?.id } }"
            :default-remove="false"
            :data-required="defaultStop"
            auto-load
        >
            <template #body="{ rows }">
                <QCard class="q-pa-md">
                    <QCardSection
                        v-for="(row, index) in rows"
                        :key="index"
                        class="row no-wrap"
                    >
                        <RoadmapAddStopForm
                            :roadmap-fk="route.params?.id"
                            :form-data="row"
                        />
                        <div class="col-1 row justify-center items-center">
                            <QIcon
                                name="delete"
                                size="sm"
                                class="cursor-pointer"
                                color="primary"
                                @click="roadmapStopsCrudRef.remove([row])"
                            >
                                <QTooltip>
                                    {{ t('Remove stop') }}
                                </QTooltip>
                            </QIcon>
                        </div>
                    </QCardSection>
                    <QCardSection>
                        <QBtn
                            flat
                            icon="add"
                            shortcut="+"
                            class="cursor-pointer"
                            color="primary"
                            @click="roadmapStopsCrudRef.insert()"
                        >
                            <QTooltip>
                                {{ t('Add stop') }}
                            </QTooltip>
                        </QBtn>
                    </QCardSection>
                </QCard>
            </template>
        </CrudModel>
    </div>
</template>
<i18n>
es:
    Address: Consignatario
    ETA date: Fecha ETA
    ETA hour: Hora ETA
    Description: Descripción
    Remove stop: Eliminar parada
    Add stop: Añadir parada
</i18n>
