<script setup lang="ts">
// imports

import useDownloadInvoice from "~/composables/api/orders/useDownloadInvoice";

// types

type Props = {
    data: Order;
};

// props

const props = defineProps<Props>();

const { data } = toRefs(props);

// states

const { downloadFn, downloadIsLoading } = useDownloadInvoice(String(data.value.id));
</script>

<template>
    <tr class="odd:bg-white even:bg-gray-50 last:border-none border-b border-slate-200">
        <td
            scope="row"
            class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0"
            :class="data.order_id ? 'text-cyan-500' : 'text-black'"
        >
            {{ data.order_id ? `${data.order_id}#` : "--" }}
        </td>
        <td class="w-3/12 px-6 py-6 text-xs lg:text-sm font-medium whitespace-pre shrink-0">
            {{ data.created_at ?? "--" }}
        </td>
        <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
            {{ data.count ? data.count : "--" }}
        </td>
        <td class="w-2/12 px-6 py-6 text-xs lg:text-sm whitespace-pre shrink-0">
            {{ data.final_price ? data.final_price : "--" }}
        </td>
        <td class="w-2/12 px-6 py-6 whitespace-pre shrink-0">
            <div
                class="w-max rounded-full py-1.5 px-3 text-xs border"
                :class="{
                    'text-warning-600 bg-warning-100 border-warning-600': ['ADMIN_PENDING', 'PENDING'].includes(
                        data.status,
                    ),
                    'text-success-600 bg-success-100 border-success-600': ['POSTED', 'RECEIVED'].includes(data.status),
                    'text-danger-600 bg-danger-100 border-danger-600': ['CANCELED', 'REFUND'].includes(data.status),
                }"
            >
                {{ data.verbose_status ? data.verbose_status : "--" }}
            </div>
        </td>
        <td class="w-1/12 px-6 py-6 shrink-0">
            <button
                @click="!downloadIsLoading ? downloadFn() : undefined"
                :disabled="downloadIsLoading"
                class="size-9 lg:size-10 flex-center border border-slate-200 rounded-md"
            >
                <Icon
                    v-if="downloadIsLoading"
                    name="ci:svg-spinners-3-dots-fade"
                    class="**:stroke-black"
                    size="20"
                />
                <Icon
                    v-else
                    name="ci:download"
                    class="**:stroke-black"
                    size="20"
                />
            </button>
        </td>
    </tr>
</template>

<style scoped></style>
