<script setup>
import { ref, computed, onMounted } from 'vue';
import { useQuasar } from 'quasar';
import { useI18n } from 'vue-i18n';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { useStateStore } from 'src/stores/useStateStore';
import { toDate, toPercentage, toCurrency } from 'filters/index';
import { tMobile } from 'src/composables/tMobile';
import CrudModel from 'src/components/CrudModel.vue';
import FetchData from 'src/components/FetchData.vue';
import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
import VnConfirm from 'src/components/ui/VnConfirm.vue';
import TicketDescriptorProxy from 'src/pages/Ticket/Card/TicketDescriptorProxy.vue';
import { useArrayData } from 'composables/useArrayData';

const { t } = useI18n();
const quasar = useQuasar();
const route = useRoute();
const router = useRouter();
const stateStore = computed(() => useStateStore());
const claim = ref(null);
const claimRef = ref();
const claimId = route.params.id;
const dialogDestination = ref(false);
const claimDestinationFk = ref(null);
const resolvedStateId = ref(null);
const claimActionsForm = ref();
const rows = ref([]);
const selectedRows = ref([]);
const destinationTypes = ref([]);
const totalClaimed = ref(null);
const DEFAULT_MAX_RESPONSABILITY = 5;
const DEFAULT_MIN_RESPONSABILITY = 1;
const arrayData = useArrayData('claimData');
const marker_labels = [
    { value: DEFAULT_MIN_RESPONSABILITY, label: t('claim.summary.company') },
    { value: DEFAULT_MAX_RESPONSABILITY, label: t('claim.summary.person') },
];
const multiplicatorValue = ref();

const columns = computed(() => [
    {
        name: 'Id',
        label: t('Id item'),
        field: (row) => row.itemFk,
    },
    {
        name: 'ticket',
        label: t('Ticket'),
        field: (row) => row.ticketFk,
        align: 'center',
    },
    {
        name: 'destination',
        label: t('Destination'),
        field: (row) => row.claimDestinationFk,
        align: 'left',
    },
    {
        name: 'Landed',
        label: t('Landed'),
        field: (row) => toDate(row.landed),
    },
    {
        name: 'quantity',
        label: t('Quantity'),
        field: (row) => row.quantity,
    },
    {
        name: 'concept',
        label: t('Description'),
        field: (row) => row.concept,
        align: 'left',
    },
    {
        name: 'price',
        label: t('Price'),
        field: (row) => row.price,
        format: (value) => value,
        align: 'center',
    },
    {
        name: 'discount',
        label: t('Discount'),
        field: (row) => row.discount,
        format: (value) => toPercentage(value / 100),
        align: 'left',
    },
    {
        name: 'total',
        label: t('Total'),
        field: (row) => row.total,
        format: (value) => value,
        align: 'center',
    },
    {
        name: 'delete',
    },
]);

onMounted(() => {
    getTotal();
});

function setData(data) {
    rows.value = data;
    getTotal();
}
function getTotal() {
    if (rows.value.length) {
        totalClaimed.value = rows.value.reduce((total, row) => total + row.total, 0);
    }
}

async function updateDestinations(claimDestinationFk) {
    await updateDestination(claimDestinationFk, selectedRows.value, { reload: true });
}

async function updateDestination(claimDestinationFk, row, options = {}) {
    if (claimDestinationFk) {
        await axios.post('Claims/updateClaimDestination', {
            claimDestinationFk,
            rows: Array.isArray(row) ? row : [row],
        });
        options.reload && claimActionsForm.value.reload();
    }
}

async function regularizeClaim() {
    await axios.post(`Claims/${claimId}/regularizeClaim`);
    await claimRef.value.fetch();
    await arrayData.fetch({ append: false });
    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
    });
    if (multiplicatorValue.value) await onUpdateGreugeAccept();
}

async function onUpdateGreugeAccept() {
    const greugeTypeFreightId = (
        await axios.get(`GreugeTypes/findOne`, {
            filter: { where: { code: 'freightPickUp' } },
        })
    ).data.id;
    const freightPickUpPrice =
        (await axios.get(`GreugeConfigs/findOne`)).data.freightPickUpPrice *
        multiplicatorValue.value;
    await axios.post(`Greuges`, {
        clientFk: claim.value.clientFk,
        description: `${t('ClaimGreugeDescription')} ${claimId}`.toUpperCase(),
        amount: freightPickUpPrice,
        greugeTypeFk: greugeTypeFreightId,
        ticketFk: claim.value.ticketFk,
    });
    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
    });
}

async function save(data) {
    const query = `Claims/${claimId}/updateClaimAction`;
    await axios.patch(query, data);
}

async function importToNewRefundTicket() {
    const query = `ClaimBeginnings/${claimId}/importToNewRefundTicket`;
    await axios.post(query);
    claimActionsForm.value.reload();
    quasar.notify({
        message: t('globals.dataSaved'),
        type: 'positive',
    });
}
</script>
<template>
    <FetchData
        ref="claimRef"
        :url="`Claims/${claimId}`"
        @on-fetch="(data) => (claim = data)"
        auto-load
    />
    <FetchData
        url="ClaimStates/findOne"
        @on-fetch="(data) => (resolvedStateId = data.id)"
        auto-load
        :where="{ code: 'resolved' }"
    />
    <FetchData
        url="ClaimDestinations"
        auto-load
        @on-fetch="(data) => (destinationTypes = data)"
    />
    <template v-if="stateStore.isHeaderMounted()">
        <Teleport to="#actions-append">
            <div class="row q-gutter-x-sm">
                <QBtn
                    flat
                    @click="stateStore.toggleRightDrawer()"
                    round
                    dense
                    icon="menu"
                >
                    <QTooltip bottom anchor="bottom right">
                        {{ t('globals.collapseMenu') }}
                    </QTooltip>
                </QBtn>
            </div>
        </Teleport>
    </template>
    <QDrawer
        v-model="stateStore.rightDrawer"
        side="right"
        :width="300"
        show-if-above
        v-if="claim"
    >
        <QCard class="totalClaim q-my-md q-pa-sm no-box-shadow">
            {{ `${t('Total claimed')}: ${toCurrency(totalClaimed)}` }}
        </QCard>
        <QCard class="q-mb-md q-pa-sm no-box-shadow">
            <QItem class="justify-between">
                <QItemLabel class="slider-container">
                    <p class="text-primary">
                        {{ t('claim.summary.actions') }}
                    </p>
                    <QSlider
                        class="responsibility { 'background-color:primary': quasar.platform.is.mobile }"
                        v-model="claim.responsibility"
                        :label-value="t('claim.summary.responsibility')"
                        @change="(value) => save({ responsibility: value })"
                        label-always
                        color="primary"
                        markers
                        :marker-labels="marker_labels"
                        :min="DEFAULT_MIN_RESPONSABILITY"
                        :max="DEFAULT_MAX_RESPONSABILITY"
                    />
                </QItemLabel>
            </QItem>
        </QCard>
        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="margin-bottom: 1em">
            <QItemLabel class="mana q-mb-md">
                <QCheckbox
                    v-model="claim.isChargedToMana"
                    @update:model-value="(value) => save({ isChargedToMana: value })"
                />
                <span>{{ t('mana') }}</span>
            </QItemLabel>
        </QCard>
        <QCard class="q-mb-md q-pa-sm no-box-shadow" style="position: static">
            <QInput
                :disable="
                    !(claim.responsibility >= Math.ceil(DEFAULT_MAX_RESPONSABILITY) / 2)
                "
                :label="t('confirmGreuges')"
                class="q-field__native text-grey-2"
                type="number"
                placeholder="0"
                id="multiplicatorValue"
                name="multiplicatorValue"
                min="0"
                max="50"
                v-model="multiplicatorValue"
            />
        </QCard>
    </QDrawer>
    <Teleport to="#st-data" v-if="stateStore.isSubToolbarShown()"> </Teleport>
    <CrudModel
        v-if="claim"
        data-key="ClaimEnds"
        url="ClaimEnds/filter"
        save-url="ClaimEnds/crud"
        ref="claimActionsForm"
        v-model:selected="selectedRows"
        :filter="{ where: { claimFk: claimId } }"
        :default-remove="true"
        :default-save="false"
        :default-reset="false"
        @on-fetch="setData"
        auto-load
    >
        <template #body>
            <QTable
                :columns="columns"
                :rows="rows"
                :dense="$q.screen.lt.md"
                row-key="id"
                selection="multiple"
                v-model:selected="selectedRows"
                :grid="$q.screen.lt.md"
                :pagination="{ rowsPerPage: 0 }"
                :hide-bottom="true"
            >
                <template #body-cell-ticket="{ value }">
                    <QTd align="center">
                        <span class="link">
                            {{ value }}
                            <TicketDescriptorProxy :id="value" />
                        </span>
                    </QTd>
                </template>
                <template #body-cell-destination="{ row }">
                    <QTd>
                        <VnSelectFilter
                            v-model="row.claimDestinationFk"
                            :options="destinationTypes"
                            option-label="description"
                            option-value="id"
                            :autofocus="true"
                            dense
                            input-debounce="0"
                            hide-selected
                            @update:model-value="(value) => updateDestination(value, row)"
                        />
                    </QTd>
                </template>
                <template #body-cell-price="{ value }">
                    <QTd align="center">
                        {{ toCurrency(value) }}
                    </QTd>
                </template>
                <template #body-cell-total="{ value }">
                    <QTd align="center">
                        {{ toCurrency(value) }}
                    </QTd>
                </template>
                <!-- View for grid mode -->
                <template #item="props">
                    <div class="q-mb-md col-12 grid-style-transition">
                        <QCard>
                            <QCardSection class="row justify-between">
                                <QCheckbox v-model="props.selected" />
                                <QBtn color="primary" icon="delete" flat round />
                            </QCardSection>

                            <QSeparator inset />
                            <QList dense>
                                <QItem v-for="column of props.cols" :key="column.name">
                                    <QItemSection>
                                        <QItemLabel caption>
                                            {{ column.label }}
                                        </QItemLabel>
                                    </QItemSection>
                                    <QItemSection side>
                                        <QItemLabel v-if="column.name === 'destination'">
                                            <VnSelectFilter
                                                v-model="props.row.claimDestinationFk"
                                                :options="destinationTypes"
                                                option-label="description"
                                                option-value="id"
                                                :autofocus="true"
                                                dense
                                                input-debounce="0"
                                                hide-selected
                                                @update:model-value="
                                                    (value) =>
                                                        updateDestination(
                                                            value,
                                                            props.row
                                                        )
                                                "
                                            />
                                        </QItemLabel>
                                        <QItemLabel v-else>
                                            {{ column.value }}
                                        </QItemLabel>
                                    </QItemSection>
                                </QItem>
                            </QList>
                        </QCard>
                    </div>
                </template>
            </QTable>
        </template>
        <template #moreBeforeActions>
            <QBtn
                color="primary"
                text-color="white"
                :unelevated="true"
                :label="tMobile('Regularize')"
                :title="t('Regularize')"
                icon="check"
                @click="regularizeClaim"
                :disable="claim.claimStateFk == resolvedStateId"
            />

            <QBtn
                color="primary"
                text-color="white"
                :unelevated="true"
                :disable="!selectedRows.length"
                :label="tMobile('Change destination')"
                :title="t('Change destination')"
                icon="swap_horiz"
                @click="dialogDestination = !dialogDestination"
            />
            <QBtn
                color="primary"
                text-color="white"
                :unelevated="true"
                :label="tMobile('Import claim')"
                :title="t('Import claim')"
                icon="Upload"
                @click="importToNewRefundTicket"
                :disable="claim.claimStateFk == resolvedStateId"
            />
        </template>
    </CrudModel>
    <QDialog v-model="dialogDestination">
        <QCard>
            <QCardSection>
                <QItem class="q-pa-sm">
                    <span class="q-dialog__title text-white">
                        {{ t('dialog title') }}
                    </span>
                    <QBtn icon="close" flat round dense v-close-popup />
                </QItem>
            </QCardSection>
            <QItemSection>
                <VnSelectFilter
                    class="q-pa-sm"
                    v-model="claimDestinationFk"
                    :options="destinationTypes"
                    option-label="description"
                    option-value="id"
                    :autofocus="true"
                    dense
                    input-debounce="0"
                    hide-selected
                />
            </QItemSection>
            <QCardActions class="justify-end q-mr-sm">
                <QBtn flat :label="t('globals.close')" color="primary" v-close-popup />
                <QBtn
                    :disable="!claimDestinationFk"
                    :label="t('globals.save')"
                    color="primary"
                    v-close-popup
                    @click="updateDestinations(claimDestinationFk)"
                />
            </QCardActions>
        </QCard>
    </QDialog>
</template>
<style lang="scss" scoped>
.slider-container {
    width: 50%;
}
@media (max-width: $breakpoint-xs) {
    .slider-container {
        width: 90%;
    }
}
.q-table {
    .q-item {
        min-height: min-content;
        height: 0;
    }
}
.q-dialog {
    .q-btn {
        height: min-content;
    }
}
.responsibility {
    max-width: 100%;
    margin-left: 40px;
}

.mana {
    float: inline-start;
}
</style>
<i18n>
en:
    mana: Is paid with mana
    dialog title: Change destination to all selected rows
    confirmGreuges: Do you want to insert complaints?
    confirmGreugesMessage: Insert complaints into the client's record

es:
    mana: Cargado al maná
    Delivered: Descripción
    Quantity: Cantidad
    Claimed: Rec
    Description: Descripción
    Price: Precio
    Discount: Dto.
    Destination: Destino
    Landed: F.entrega
    Remove line: Eliminar línea
    Total claimed: Total reclamado
    Regularize: Regularizar
    Change destination: Cambiar destino
    Import claim: Importar reclamación
    dialog title: Cambiar destino en todas las filas seleccionadas
    Remove: Eliminar
    dialogGreuge title: Insertar greuges en la ficha del cliente
    ClaimGreugeDescription: Id reclamación
    Id item: Id artículo
    confirmGreuges: ¿Desea insertar greuges?
    confirmGreugesMessage: Insertar greuges en la ficha del cliente
    Apply Greuges: Aplicar Greuges
</i18n>
