<script setup>
import { useI18n } from 'vue-i18n';
import {
    inject,
    onBeforeMount,
    ref,
    computed,
    watch,
    onBeforeUnmount
} from 'vue';
import { useRoute, useRouter } from 'vue-router';

import VnImg from 'src/components/ui/VnImg.vue';
import VnSelect from 'src/components/common/VnSelect.vue';
import CatalogCard from 'src/pages/Ecomerce/CatalogCard.vue';
import VnSearchBar from 'src/components/ui/VnSearchBar.vue';

import { useAppStore } from 'stores/app';
import { useUserStore } from 'stores/user';
import { storeToRefs } from 'pinia';
import { formatDateTitle, currency } from 'src/lib/filters.js';
import useNotify from 'src/composables/useNotify.js';
import debounce from 'src/utils/debouncer.js';
import { fetch } from 'src/composables/serviceUtils';

const jApi = inject('jApi');
const api = inject('api');
const { t } = useI18n();
const appStore = useAppStore();
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const { isHeaderMounted, rightDrawerOpen, basketOrderId, isDesktop } =
    storeToRefs(appStore);
const { isGuest } = storeToRefs(userStore);
const { notify } = useNotify();

const order = ref(null);
const items = ref([]);
const selectedItem = ref(null);
const showItemDialog = ref(false);
const loading = ref(false);
const viewMode = ref('grid');

// Filters options
const categories = ref([]);
const itemColors = ref([]);
const itemFamilies = ref([]);
const itemProducers = ref([]);
const itemOrigins = ref([]);
const itemSubcategories = ref([]);
const search = ref(null);
// Filters values
const category = ref(null);
const type = ref(null);
const color = ref(null);
const producer = ref(null);
const origin = ref(null);
const subcategory = ref(null);
// Order by options
const orderBy = ref({
    field: 'relevancy DESC, name',
    way: 'ASC',
    isTag: false
});
const orderByOptions = ref([
    {
        label: t('relevancy'),
        value: {
            field: 'relevancy DESC, name',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('name'),
        value: {
            field: 'name',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('lowerSize'),
        value: {
            field: 'i.size',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('higherSize'),
        value: {
            field: 'i.size',
            way: 'DESC',
            isTag: false
        }
    },
    {
        label: t('lowerPrice'),
        value: {
            field: 'price',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('higherPrice'),
        value: {
            field: 'price',
            way: 'DESC',
            isTag: false
        }
    },
    {
        label: t('available'),
        value: {
            field: 'available',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('color'),
        value: {
            field: 'i.inkFk',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('producer'),
        value: {
            field: 'producerFk',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('origin'),
        value: {
            field: 'originFk',
            way: 'ASC',
            isTag: false
        }
    },
    {
        label: t('category'),
        value: {
            field: 'categoryFk',
            way: 'ASC',
            isTag: false
        }
    }
]);

const selectedCategory = computed({
    get() {
        return category.value;
    },
    async set(value) {
        category.value = value;
        onCategoryChange();
        if (!value) return;
        debouncedGetFilters();
        debouncedGetItems();
        refreshTitle();
    }
});

const selectedType = computed({
    get() {
        return type.value;
    },
    set(value) {
        type.value = value;
        router.push({
            params: { category: category.value, type: type.value },
            query: { ...route.query }
        });
        if (!selectedCategory.value) return;
        debouncedGetFilters();
        debouncedGetItems();
        refreshTitle();
    }
});

const selectedColor = computed({
    get() {
        return color.value;
    },
    set(value) {
        color.value = value;
        if (!selectedCategory.value) return;
        debouncedGetFilters();
        debouncedGetItems();
    }
});

const selectedProducer = computed({
    get() {
        return producer.value;
    },
    set(value) {
        producer.value = value;
        if (!value || !selectedCategory.value) return;
        debouncedGetFilters();
        debouncedGetItems();
    }
});

const selectedOrigin = computed({
    get() {
        return origin.value;
    },
    set(value) {
        origin.value = value;
        if (!value || !selectedCategory.value) return;
        debouncedGetFilters();
        debouncedGetItems();
    }
});

const selectedSubcategory = computed({
    get() {
        return subcategory.value;
    },
    set(value) {
        subcategory.value = value;
        if (!value && !selectedCategory.value) return;
        debouncedGetFilters();
        debouncedGetItems();
    }
});

const selectedOrderBy = computed({
    get() {
        return orderBy.value;
    },
    set(value) {
        if (value) {
            orderBy.value = value;
        } else {
            orderBy.value = {
                field: 'relevancy DESC, name',
                way: 'ASC',
                isTag: false
            };
        }
        debouncedGetItems();
    }
});

const queryFilter = computed(() => {
    const filters = [];

    // Filtro principal
    if (selectedCategory.value) {
        filters.push(`(t.categoryFk = ${selectedCategory.value})`);
    }

    // Filtro búsqueda
    if (search.value) {
        filters.push(
            `((i.longName LIKE '%${search.value}%') OR (i.subname LIKE '%${search.value}%'))`
        );
    }

    const otherFilters = {
        'i.typeFk': selectedType.value,
        'i.inkFk': selectedColor?.value ? `'${selectedColor.value}'` : null,
        'i.producerFk': selectedProducer.value,
        'i.originFk': selectedOrigin.value
    };

    // Añadir solo aquellos filtros que tengan valor
    Object.entries(otherFilters).forEach(([key, value]) => {
        if (value) {
            filters.push(`(${key} = ${value})`);
        }
    });

    // Concatenar todos los filtros
    return filters.join(' AND ');
});

const isSomeFilterSelected = computed(() => {
    return (
        search.value ||
        selectedType.value ||
        selectedColor.value ||
        selectedProducer.value ||
        selectedOrigin.value ||
        selectedSubcategory.value
    );
});

const viewTypeButtonContent = computed(() => {
    return {
        label: t(viewMode.value === 'list' ? 'gridView' : 'listView'),
        icon: viewMode.value === 'list' ? 'grid_on' : 'view_list'
    };
});

const checkGuest = () => {
    if (isGuest.value) {
        notify(t('youMustBeLoggedIn'), 'negative');
        return true;
    }

    return false;
};

const getFilters = async () => {
    const promises = [
        getItemFamilies(),
        getItemColors(),
        getProducers(),
        getOrigins(),
        getSubcategories()
    ];

    await Promise.allSettled(promises);
};

const getItemExprBuilder = (param, value) => {
    if (param === 'orderFk' || param === 'orderBy') return;
    else return { [param]: value };
};

const getItems = async () => {
    try {
        if (!basketOrderId.value || !isSomeFilterSelected.value) return;
        loading.value = true;

        const params = {
            orderFk: basketOrderId.value,
            orderBy: JSON.stringify({
                field: selectedOrderBy.value.field,
                way: selectedOrderBy.value.way,
                isTag: selectedOrderBy.value.isTag
            }),
            typeFk: selectedType.value,
            categoryFk: selectedCategory.value,
            inkFk: selectedColor.value,
            producerFk: selectedProducer.value,
            originFk: selectedOrigin.value
        };
        const { data } = await fetch({
            url: 'Orders/catalogFilter',
            params,
            exprBuilder: getItemExprBuilder
        });

        items.value = data;
        await onItemsFetched();
        loading.value = false;
    } catch (error) {
        console.error('Error getting items:', error);
    }
};

const debouncedGetItems = debounce(getItems, 400);
const debouncedGetFilters = debounce(getFilters, 400);

const getOrder = async () => {
    try {
        if (!basketOrderId.value) return;

        const filter = {
            include: [
                {
                    relation: 'address',
                    scope: {
                        fields: ['nickname', 'city', 'street']
                    }
                }
            ],
            id: basketOrderId.value,
            fields: ['id', 'sent', 'addressFk', 'agencyModeFk', 'nickname']
        };

        const { data } = await api.get('Orders/filter', {
            params: {
                filter: JSON.stringify(filter),
                orderFk: basketOrderId.value
            }
        });

        order.value = data[0];
    } catch (error) {
        console.error('Error getting order:', error);
    }
};

const getCategories = async () => {
    try {
        const { data } = await api.get('itemCategories', {
            params: {
                filter: JSON.stringify({
                    order: 'display ASC',
                    include: {
                        relation: 'itemTypes',
                        scope: {
                            fields: ['code', 'name']
                        }
                    }
                })
            }
        });
        categories.value = data.map(category => {
            return {
                ...category,
                icon: category.icon.split('-')[1]
            };
        });
    } catch (error) {
        console.error('Error getting categories:', error);
    }
};

const getItemFamilies = async () => {
    try {
        if (!selectedCategory.value || !basketOrderId.value) return;

        const { data } = await api.get(
            `Orders/${basketOrderId.value}/getItemTypeAvailable`,
            {
                params: { itemCategoryId: selectedCategory.value }
            }
        );

        itemFamilies.value = data;
    } catch (error) {
        console.error('Error getting available items:', error);
    }
};

const getItemColors = async () => {
    try {
        if (!selectedCategory.value || !basketOrderId.value) return;

        const { data } = await api.get('Orders/itemsColorsAvailable', {
            params: {
                orderFk: basketOrderId.value,
                whereFilter: queryFilter.value
            }
        });

        itemColors.value = data;
    } catch (error) {
        console.error('Error getting items colors:', error);
    }
};

const onItemsFetched = async () => {
    items.value.forEach(item => {
        const previewTags = [
            { name: item.tag5, value: item.value5 },
            { name: item.tag6, value: item.value6 },
            { name: item.tag7, value: item.value7 }
        ];
        item.previewTags = previewTags;
    });
};

const getProducers = async () => {
    try {
        const { data } = await api.get('Orders/itemsProducersAvailable', {
            params: {
                orderFk: basketOrderId.value,
                whereFilter: queryFilter.value
            }
        });
        itemProducers.value = data;
    } catch (error) {
        console.error('Error getting producers:', error);
    }
};

const getOrigins = async () => {
    try {
        const { data } = await api.get('Orders/itemsOriginsAvailable', {
            params: {
                orderFk: basketOrderId.value,
                whereFilter: queryFilter.value
            }
        });
        itemOrigins.value = data;
    } catch (error) {
        console.error('Error getting origins:', error);
    }
};

const getSubcategories = async () => {
    try {
        const { data } = await api.get('Orders/itemsSubcategoriesAvailable', {
            params: {
                orderFk: basketOrderId.value,
                whereFilter: queryFilter.value
            }
        });

        const filtered = data.filter(item => item.category);
        itemSubcategories.value = filtered.map(i => i.category);
    } catch (error) {
        console.error('Error getting subcategories:', error);
    }
};

const showItem = async item => {
    if (checkGuest()) return;

    showItemDialog.value = true;
    const [itemLots, tags] = await Promise.all([
        calcItem(item.id),
        getItemTags(item.id)
    ]);
    item.lots = itemLots;
    item.tags = tags;
    selectedItem.value = item;
};

const removeCategory = () => {
    selectedCategory.value = null;
    onCategoryChange();
};

const onCategoryChange = () => {
    selectedType.value = null;
    selectedColor.value = null;
    selectedProducer.value = null;
    selectedOrigin.value = null;
    selectedSubcategory.value = null;
    search.value = '';
    items.value = [];
    router.push({ params: { category: category.value, type: null } });
};

const getItemTags = async itemFk => {
    try {
        const { data } = await api.get('ItemTags', {
            params: {
                filter: JSON.stringify({
                    where: {
                        itemFk
                    },
                    include: [
                        {
                            relation: 'tag',
                            scope: {
                                fields: ['name']
                            }
                        }
                    ]
                })
            }
        });

        return data.map(tag => {
            return {
                name: tag?.tag?.name,
                value: tag.value
            };
        });
    } catch (error) {
        console.error('Error getting available items:', error);
    }
};

const calcItem = async itemId => {
    try {
        const { data } = await api.get('Orders/calcCatalogFromItem', {
            params: {
                orderFk: basketOrderId.value,
                itemId
            }
        });
        return data;
    } catch (error) {
        console.error('Error getting items:', error);
    }
};

const addedItemsAmountAcc = ref({});
const amount = ref(0);

const onAddLotClick = async lot => {
    try {
        const { grouping, warehouseFk, available } = lot;

        let lotAmount = addedItemsAmountAcc.value[warehouseFk];

        if (lotAmount === undefined) lotAmount = 0;

        if (lotAmount < available) {
            let newAmount = lotAmount + grouping;

            if (newAmount > available) newAmount = available;

            addedItemsAmountAcc.value[warehouseFk] = newAmount;
            amount.value += newAmount - lotAmount;
        } else {
            notify(t('amountNotAvailable'), 'negative');
        }
    } catch (error) {
        console.error('Error adding item to basket:', error);
    }
};

const resetAmounts = () => {
    selectedItem.value = null;
    addedItemsAmountAcc.value = {};
    amount.value = 0;
};

const addItemToOrder = async params => {
    try {
        await api.post('applications/myOrder_addItem/execute-proc', {
            schema: 'hedera',
            params: [
                params.orderFk,
                params.warehouse,
                params.item,
                params.amount
            ]
        });
    } catch (error) {
        console.error('Error adding item to basket:', error);
        throw error;
    }
};

const onConfirmClick = async params => {
    try {
        let amountSum = 0;
        const addItemPromises = [];

        for (const warehouse in addedItemsAmountAcc.value) {
            const amount = addedItemsAmountAcc.value[warehouse];
            amountSum += amount;

            const params = {
                orderFk: basketOrderId.value,
                warehouse,
                item: selectedItem.value.id,
                amount
            };
            addItemPromises.push(addItemToOrder(params));
        }

        if (amountSum > 0) {
            await Promise.all(addItemPromises);
            notify(
                `${t('added')} ${amountSum} ${selectedItem.value.name}`,
                'positive'
            );
        }
        showItemDialog.value = false;
    } catch (error) {
        console.error('Error adding item to basket:', error);
    }
};

const refreshTitle = () => {
    const { meta } = route;
    const title = t(meta.title);
    let subtitle;
    let customTitle;

    if (selectedCategory.value) {
        const _category = categories.value.find(
            i => i.id === selectedCategory.value
        );
        if (_category) {
            const categoryName = _category.name;
            customTitle = categoryName;

            if (selectedType.value) {
                const _type = itemFamilies.value.find(
                    i => i.id === selectedType.value
                );
                if (_type) {
                    subtitle = categoryName;
                    customTitle = _type.name;
                }
            }
        }
    }

    appStore.$patch({ title, subtitle, customTitle });
};

const onViewModeClick = () => {
    viewMode.value = viewMode.value === 'list' ? 'grid' : 'list';
};

const redirectToCheckout = () => {
    if (checkGuest()) return;

    router.push({
        name: 'checkout',
        params: { id: basketOrderId.value },
        query: { continue: 'catalog' }
    });
};

const redirectToBasket = () => {
    if (checkGuest()) return;
    router.push({ name: 'basket' });
};

const toggleRightDrawer = () => {
    rightDrawerOpen.value = !rightDrawerOpen.value;
};

watch(
    () => route.query.search,
    val => {
        if (val) {
            search.value = val;
            debouncedGetItems();
        }
    }
);

onBeforeMount(async () => {
    if (!isGuest.value) {
        await appStore.check('catalog');
    } else {
        const resultSet = await jApi.execQuery(
            'CALL myOrder_configureForGuest(@orderId); SELECT @orderId;'
        );
        resultSet.fetchResult();
        appStore.basketOrderId = resultSet.fetchValue();
    }
    await getOrder();
    await getCategories();

    if (route.params.category)
        selectedCategory.value = Number(route.params.category);
    if (route.params.type) selectedType.value = Number(route.params.type);
});

onBeforeUnmount(() => appStore.resetCustomTitle());
</script>

<template>
    <Teleport v-if="isHeaderMounted" to="#actions">
        <div class="row">
            <VnSearchBar
                @on-search-error="
                    () => {
                        items = [];
                        search = '';
                    }
                "
            />
            <QBtn
                :icon="viewTypeButtonContent.icon"
                :label="viewTypeButtonContent.label"
                @click="onViewModeClick()"
                rounded
                no-caps
            >
                <QTooltip>
                    {{ viewTypeButtonContent.label }}
                </QTooltip>
            </QBtn>
            <QBtn
                icon="shopping_cart_checkout"
                :label="t('shoppingCart')"
                @click="redirectToBasket()"
                rounded
                no-caps
                data-cy="catalogGoToBasketButton"
            >
                <QTooltip>
                    {{ t('shoppingCart') }}
                </QTooltip>
            </QBtn>
            <QBtn
                v-if="!isDesktop"
                flat
                dense
                round
                icon="menu"
                aria-label="Menu"
                @click="toggleRightDrawer()"
            />
        </div>
    </Teleport>
    <div>
        <QDrawer v-model="rightDrawerOpen" side="right" :width="250" persistent>
            <div class="q-pa-md">
                <div class="basket-info q-gutter-y-sm">
                    <span v-if="order?.nickname">{{ order.nickname }}</span>
                    <span v-if="order?.sent">
                        {{
                            formatDateTitle(order.sent, {
                                shortDay: true,
                                shortMonth: true,
                                includeOfString: true
                            })
                        }}
                    </span>
                    <QBtn
                        rounded
                        no-caps
                        @click="redirectToCheckout()"
                        data-cy="orderModifyButton"
                        color="light-green-7"
                        unelevated
                        text-color="white"
                    >
                        {{ t('modify') }}
                    </QBtn>
                </div>
                <div class="q-mt-md">
                    <div class="q-mb-xs text-grey-7">
                        {{ t('category') }}
                        <QIcon
                            v-if="category"
                            style="font-size: 1.3em"
                            name="cancel"
                            class="cursor-pointer"
                            :title="t('deleteFilter')"
                            @click="removeCategory()"
                        />
                    </div>
                    <div class="categories">
                        <QBtn
                            flat
                            round
                            class="category q-pa-sm"
                            v-for="cat in categories"
                            :class="{ active: category == cat.id }"
                            :key="cat.id"
                            @click="selectedCategory = cat.id"
                            data-cy="catalogCategoryButton"
                        >
                            <img :src="`statics/category/${cat.icon}.svg`" />
                            <QTooltip>{{ cat.name }}</QTooltip>
                        </QBtn>
                    </div>
                </div>
                <div class="q-mt-md" v-if="selectedCategory">
                    <div class="q-mb-xs text-grey-7">
                        {{ t('filterBy') }}
                    </div>
                    <VnSelect
                        v-model="selectedType"
                        option-value="id"
                        option-label="name"
                        :options="itemFamilies"
                        :disable="!category"
                        :label="t('family')"
                        data-cy="catalogFamilySelect"
                    />
                    <VnSelect
                        v-model="selectedColor"
                        option-value="id"
                        option-label="name"
                        :options="itemColors"
                        :disable="!category"
                        :label="t('color')"
                    />
                    <VnSelect
                        v-model="selectedProducer"
                        option-value="id"
                        option-label="name"
                        :options="itemProducers"
                        :disable="!category"
                        :label="t('producer')"
                    />
                    <VnSelect
                        v-model="selectedOrigin"
                        option-value="id"
                        option-label="name"
                        :options="itemOrigins"
                        :disable="!category"
                        :label="t('origin')"
                    />
                    <VnSelect
                        v-model="selectedSubcategory"
                        option-value="id"
                        option-label="name"
                        :options="itemSubcategories"
                        :disable="!category"
                        :label="t('category')"
                    />
                    <div
                        v-if="isSomeFilterSelected"
                        class="q-mt-md text-grey-7"
                    >
                        {{ t('orderBy') }}
                    </div>
                    <VnSelect
                        v-if="isSomeFilterSelected"
                        v-model="selectedOrderBy"
                        :options="orderByOptions"
                        option-value="value"
                        option-label="label"
                        :is-clearable="false"
                        :label="t('sort')"
                    />
                </div>
                <span
                    v-else
                    class="flex full-width justify-center q-pt-lg text-h6 text-grey-7"
                >
                    {{ t('chooseCategory') }}
                </span>
            </div>
        </QDrawer>
        <div
            :class="
                viewMode === 'grid'
                    ? ' row justify-center q-gutter-md'
                    : 'column items-center'
            "
        >
            <QSpinner
                v-if="loading"
                color="primary"
                size="3em"
                :thickness="2"
            />
            <div
                v-else-if="!items || !items.length || !isSomeFilterSelected"
                class="text-subtitle1 text-grey-7 q-pa-md"
            >
                <span>{{ t('pleaseSetFilter') }}</span>
            </div>
            <CatalogCard
                v-else
                v-for="_item in items"
                :key="_item.id"
                :item="_item"
                :view-mode="viewMode"
                @click="showItem(_item)"
                data-cy="catalogCardElement"
            />
        </div>
        <QDialog v-model="showItemDialog" @hide="resetAmounts()">
            <QCard v-if="selectedItem" style="width: 25em" class="column">
                <div class="q-pa-md relative-position">
                    <div class="q-mb-md" style="display: flex">
                        <VnImg
                            storage="catalog"
                            size="200x200"
                            :id="selectedItem.image"
                            width="112px"
                            height="112px"
                            rounded="bottom"
                            class="q-mr-md"
                        />
                        <div class="column">
                            <div class="text-subtitle2">
                                {{ selectedItem.name }}
                            </div>
                            <span
                                class="text-subtitle2 text-grey-7 text-uppercase"
                            >
                                {{ selectedItem.subName }}
                            </span>
                            <span class="text-grey-7">
                                #{{ selectedItem.id }}</span
                            >
                        </div>
                    </div>
                    <div class="text-caption">
                        <div
                            v-for="(tag, index) in selectedItem.tags"
                            :key="index"
                            class="row"
                        >
                            <span class="text-grey-7" style="width: 35%">
                                {{ tag.name }}
                            </span>
                            <span>{{ tag.value }}</span>
                        </div>
                    </div>
                    <div
                        v-if="selectedItem.minQuantity"
                        class="row justify-end q-px-md absolute-bottom-right q-pa-md"
                    >
                        <QIcon
                            name="production_quantity_limits"
                            size="xs"
                            color="negative"
                        >
                            <QTooltip>
                                {{ t('minQuantity') }}
                            </QTooltip>
                        </QIcon>
                        <span class="text-negative text-caption">{{
                            selectedItem.minQuantity
                        }}</span>
                    </div>
                </div>
                <div
                    v-for="(lot, index) in selectedItem.lots"
                    :key="index"
                    class="column"
                >
                    <QSeparator />
                    <div class="row items-center q-px-md q-py-xs">
                        <span class="col">{{ currency(lot.price) }}</span>
                        <span class="col"> x{{ lot.grouping }}</span>
                        <QBtn
                            icon="add"
                            round
                            flat
                            dense
                            @click="onAddLotClick(lot)"
                            data-cy="addItemQuantityButton"
                        >
                            <QTooltip>{{ t('add') }}</QTooltip>
                        </QBtn>
                    </div>
                </div>
                <div class="row items-center justify-between q-pa-md bg-black">
                    <QBtn
                        icon="delete"
                        round
                        dense
                        flat
                        color="white"
                        @click="resetAmounts()"
                    >
                        <QTooltip>{{ t('delete') }}</QTooltip>
                    </QBtn>
                    <span class="text-center text-white">{{ amount }}</span>
                    <QBtn
                        icon="check"
                        round
                        dense
                        flat
                        color="white"
                        @click="onConfirmClick()"
                        data-cy="catalogAddToBasketButton"
                    >
                        <QTooltip>{{ t('confirm') }}</QTooltip>
                    </QBtn>
                </div>
            </QCard>
            <QSpinner v-else color="primary" size="3em" :thickness="5" />
        </QDialog>
    </div>
</template>

<style lang="scss" scoped>
.basket-info {
    display: flex;
    flex-direction: column;
    background-color: #8cc63f;
    color: white;
    padding: 17px 28px;
    border-radius: 7px;
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .category {
        width: 54px;

        &.active {
            background: rgba(0, 0, 0, 0.08);
        }
        & > img {
            height: 40px;
            width: 40px;
        }
    }
}
</style>

<i18n lang="yaml">
en-US:
    category: Category
    deleteFilter: Delete filter
    family: Family
    color: Color
    producer: Producer
    origin: Origin
    pleaseSetFilter: Choose a filter from the right menu
    orderBy: Order by
    relevancy: Relevancy
    name: Name
    lowerSize: Lower size
    higherSize: Higher size
    lowerPrice: Lower price
    higherPrice: Higher price
    add: Add
    added: Added
    listView: List view
    gridView: Grid view
    filterBy: Filter by
    chooseCategory: Choose a category
    youMustBeLoggedIn: You must be a registered user
    sort: Order
    amountNotAvailable: Amount not available
es-ES:
    category: Categoría
    deleteFilter: Quitar filtro
    family: Familia
    search: Buscar
    color: Color
    producer: Productor
    origin: Origen
    pleaseSetFilter: Elige un filtro en el menú de la derecha
    orderBy: Ordernar por
    relevancy: Relevancia
    name: Nombre
    lowerSize: Medida más pequeña
    higherSize: Medida más grande
    lowerPrice: Precio más bajo
    higherPrice: Precio más alto
    add: Añadir
    added: Añadido
    listView: Vista de lista
    gridView: Vista de rejilla
    filterBy: Filtrar por
    chooseCategory: Elige una categoría
    youMustBeLoggedIn: Debes estar registrado como usuario
    sort: Ordenar
    amountNotAvailable: Cantidad no disponible
ca-ES:
    category: Categoría
    deleteFilter: Eliminar filtro
    family: Família
    color: Color
    producer: Productor
    origin: Origen
    pleaseSetFilter: Tria un filtre en el menú de la dreta
    orderBy: Ordenar per
    relevancy: Relevància
    name: Nom
    lowerSize: Mida més petita
    higherSize: Mida més gran
    lowerPrice: Preu més baix
    higherPrice: Preu més alt
    add: Afegir
    listView: Vista de llista
    gridView: Vista de graella
    filterBy: Filtrar per
    chooseCategory: Tria una categoria
    youMustBeLoggedIn: Has d'estar registrat com a usuari
    sort: Ordenar
    amountNotAvailable: Quantitat no disponible
fr-FR:
    category: Catégorie
    deleteFilter: Supprimer le filtre
    family: Famille
    color: Couleur
    producer: Producteur
    origin: Origine
    pleaseSetFilter: Choisissez un filtre dans le menu de droite
    orderBy: Trier par
    relevancy: Pertinence
    name: Nom
    lowerSize: Taille le plus bas
    higherSize: Taille le plus élevé
    lowerPrice: Prix le plus bas
    higherPrice: Prix le plus élevé
    add: Ajouter
    listView: Vue en liste
    gridView: Vue en grille
    filterBy: Filtrer par
    chooseCategory: Choisissez une catégorie
    youMustBeLoggedIn: Vous devez être un utilisateur enregistré
    sort: Trier
    amountNotAvailable: Quantité non disponible
pt-PT:
    category: Categoria
    deleteFilter: Apagar filtro
    family: Família
    color: Cor
    producer: Produtor
    origin: Origem
    pleaseSetFilter: Escolha um filtro no menu à direita
    orderBy: Ordenar por
    relevancy: Relevância
    name: Nome
    lowerSize: Tamanho menor
    higherSize: Tamanho maior
    lowerPrice: Preço mais baixo
    higherPrice: Preço mais alto
    add: Adicionar
    listView: Vista de lista
    gridView: Vista de grade
    filterBy: Filtrar por
    chooseCategory: Escolha uma categoria
    youMustBeLoggedIn: Deves estar registrado como usuario
    sort: Ordenar
    amountNotAvailable: Quantidade não disponível
</i18n>
