<script setup lang="ts">
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import { useOrderStore } from '../../stores/orders'
import { storeToRefs } from 'pinia'

const ordersStore = useOrderStore()
const { orders } = storeToRefs(ordersStore)
</script>

<template>
  <DataTable
    :value="orders"
    scrollable
    scrollHeight="flex"
    size="small"
    class="orders-table"
    :empty-message="'No orders'"
  >
    <Column field="tokenIn" header="Token In" style="min-width: 90px" />
    <Column field="tokenOut" header="Token Out" style="min-width: 90px" />
    <Column field="route.exchange" header="Exchange" style="min-width: 100px" />
    <Column field="route.fee" header="Fee" style="min-width: 70px" />
    <Column field="amount" header="Amount" style="min-width: 100px" />
    <Column field="minFillAmount" header="Min Fill" style="min-width: 100px" />
    <Column field="amountIsInput" header="Amt Is Input" style="min-width: 100px">
      <template #body="{ data }">{{ data.amountIsInput ? 'Yes' : 'No' }}</template>
    </Column>
    <Column field="conditionalOrder" header="Condition" style="min-width: 100px" />
  </DataTable>
</template>

<style scoped>
.orders-table {
  flex: 1;
  width: 100%;
  height: 100%;
  font-size: 12px;
}

.orders-table :deep(.p-datatable-header-cell) {
  background: #1a1a1a !important;
  color: #aaa !important;
  border-color: #2e2e2e !important;
  padding: 4px 8px !important;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.orders-table :deep(.p-datatable-row-cell) {
  background: #0f0f0f !important;
  color: #dbdbdb !important;
  border-color: #1e1e1e !important;
  padding: 3px 8px !important;
}

.orders-table :deep(tr:hover .p-datatable-row-cell) {
  background: #1a1a1a !important;
}

.orders-table :deep(.p-datatable-empty-message td) {
  background: #0f0f0f !important;
  color: #555 !important;
  text-align: center;
  padding: 16px !important;
}
</style>
