<script setup>
import { ref, watch } from 'vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import FormPopup from 'src/components/FormPopup.vue';
import VnRow from 'src/components/ui/VnRow.vue';
import VnInput from 'src/components/common/VnInput.vue';
import FetchData from 'src/components/FetchData.vue';
import { useI18n } from 'vue-i18n';
import axios from 'axios';

const $props = defineProps({
    entityId: {
        type: Number,
        required: true,
    },
    height: {
        type: Number,
        default: 0,
    },
    color: {
        type: Array,
        default: () => [],
    },
});
const entityId = ref($props.entityId);
const selectedTrayColor = ref();
const trayHeight = ref();
const wagonColors = ref([]);
const wagonColorTranslated = ref();
const heights = ref();
const existingTrayHeight = ref($props.height);
const { t } = useI18n();

watch(wagonColors, () => {
    wagonColorTranslated.value = wagonColors.value.map((color) => {
        return { ...color, name: t(`colors.${color.name}`) };
    });
});
const emit = defineEmits(['onSubmit']);

async function getTrays() {
    const { data } = await axios.get('WagonTypeTrays', undefined, {
        filter: { wagonTypeFk: entityId.value },
    });
    existingTrayHeight.value = data.filter((item) => item.wagonTypeFk == entityId.value);
    heights.value = existingTrayHeight.value.map((item) => item.height);
}

function onSubmit() {
    emit('onSubmit', {
        wagonTypeFk: entityId.value,
        wagonTypeColorFk: selectedTrayColor.value,
        height: trayHeight.value,
    });
}
getTrays();
</script>

<template>
    <FetchData
        url="WagonTypeColors"
        @on-fetch="(data) => (wagonColors = data)"
        auto-load
    />
    <FormPopup
        ref="createTrayFormDialogRef"
        @on-submit="onSubmit()"
        :title="t('Add new tray')"
        :entity-id="selectedEntityId"
    >
        <template #form-inputs>
            <VnRow class="row q-gutter-md q-mb-md">
                <VnSelect
                    v-model="selectedTrayColor"
                    :options="wagonColorTranslated"
                    option-label="name"
                    option-value="id"
                    id="id"
                    :label="t('Select a tray color')"
                    :required="true"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps" clickable>
                            <QItemSection>
                                <QItemLabel>{{ scope.opt.name }}</QItemLabel>
                            </QItemSection>
                        </QItem>
                    </template>
                </VnSelect>
                <VnInput v-model="trayHeight" :label="t('Height')" type="number" />
            </VnRow>
        </template>
    </FormPopup>
</template>

<i18n>
    en:
        Select a tray: Select a tray
        colors:
            white: White
            red: Red
            green: Green
            blue: Blue
    es:
        Select a tray color: Seleccione un color
        Add new tray: Añadir nueva bandeja
        Height: Altura
        The minimum height between trays is 50cm: La altura mínima entre bandejas es de 50cm
        The maximum height of the wagon is 200cm: La altura máxima del vagón es de 200cm
        A tray with the same height already exists, try with a different height: Ya existe una bandeja con la misma altura, prueba con una diferente
        colors:
            white: Blanco
            red: Rojo
            green: Verde
            blue: Azul
</i18n>
