<script setup>
import { ref, onMounted } from 'vue';
import { useSession } from 'src/composables/useSession';
import { useI18n } from 'vue-i18n';
import { useQuasar } from 'quasar';
import VnConfirm from 'components/ui/VnConfirm.vue';

const quasar = useQuasar();
const { t } = useI18n();
const { getTokenMultimedia } = useSession();
const token = getTokenMultimedia();

const counters = ref({
    alquilerBandeja: { count: 0, id: 96001, title: 'CC Bandeja', isTray: true },
    bandejaRota: { count: 0, id: 88381, title: 'CC Bandeja Rota', isTray: true },
    carryOficial: { count: 0, id: 96000, title: 'CC Carry OFICIAL TAG5' },
    candadoRojo: { count: 0, id: 96002, title: 'CC Carry NO OFICIAL' },
    sacadores: { count: 0, id: 142260, title: 'CC Sacadores' },
    sinChapa: { count: 0, id: 2214, title: 'DC Carry Sin Placa CC' },
    carroRoto: { count: 0, id: 142251, title: 'Carro Roto' },
});

const actions = {
    add: (counter) => counter + 1,
    subtract: (counter) => (counter ? counter - 1 : 0),
    flush: () => 0,
    addSpecific: (counter, amount) => counter + amount,
};

onMounted(() => {
    const types = Object.keys(counters.value);
    for (let type of types) {
        const counter = localStorage.getItem(type);
        counters.value[type].count = counter ? parseInt(counter) : 0;
    }
});

function getUrl(id) {
    return `/api/Images/catalog/200x200/${id}/download?access_token=${token}`;
}

async function handleEvent(type, action, amount) {
    const counter = counters.value[type].count;
    let isOk = true;

    if (action == 'flush') isOk = await confirm();

    if (isOk) {
        counters.value[type].count = actions[action](counter, amount);
        localStorage.setItem(type, counters.value[type].count);
    }
}

function confirm() {
    return new Promise((resolve) => {
        quasar
            .dialog({
                component: VnConfirm,
                componentProps: {
                    title: t('Are you sure?'),
                    message: t('The counter will be reset to zero'),
                },
            })
            .onOk(() => resolve(true))
            .onCancel(() => resolve(false));
    });
}
</script>
<template>
    <QList class="row q-mx-auto q-mt-xl">
        <QItem v-for="(props, name) in counters" :key="name" class="col-6">
            <QItemSection>
                <QImg
                    :src="getUrl(props.id)"
                    width="130px"
                    @click="handleEvent(name, 'add')"
                />
                <p class="title">{{ props.title }}</p>
            </QItemSection>
            <QItemSection class="q-ma-none">
                <QItemLabel class="text-h4">
                    {{ props.count }}
                </QItemLabel>
                <QItemLabel>
                    <QBtn
                        class="text-center q-mr-xs"
                        color="warning"
                        dense
                        size="sm"
                        v-if="props.isTray"
                        @click="handleEvent(name, 'addSpecific', 30)"
                    >
                        {{ t('Add 30') }}
                    </QBtn>
                    <QBtn
                        class="text-center q-mr-xs"
                        color="warning"
                        dense
                        size="sm"
                        v-else
                        @click="handleEvent(name, 'addSpecific', 10)"
                    >
                        {{ t('Add 10') }}
                    </QBtn>
                </QItemLabel>
                <QItemLabel>
                    <QBtn
                        class="text-center q-mr-xs"
                        color="warning"
                        dense
                        size="sm"
                        @click="handleEvent(name, 'subtract')"
                    >
                        {{ t('Subtract 1') }}
                    </QBtn>
                    <QBtn
                        class="text-center q-ml-xs"
                        color="red"
                        dense
                        size="sm"
                        @click="handleEvent(name, 'flush')"
                    >
                        {{ t('Flush') }}
                    </QBtn>
                </QItemLabel>
            </QItemSection>
            <QSeparator class="q-mt-sm q-mx-none" color="primary" />
        </QItem>
    </QList>
</template>
<style lang="scss" scoped>
.q-list {
    max-width: 50em;
}
@media (max-width: $breakpoint-sm) {
    .q-item {
        display: flex;
        flex-direction: column;
    }
    .title {
        min-height: 3em;
    }
}
</style>
<i18n>
es:
    Subtract 1: Quitar 1
    Add 30: Añadir 30
    Add 10: Añadir 10
    Flush: Vaciar
    Are you sure?: ¿Estás seguro?
    It will set to 0: Se pondrá a 0
    The counter will be reset to zero: Se pondrá el contador a cero
</i18n>
