<template>
  <tr>
    <td v-if="order.MarketId"><router-link :to="/market/ + order.MarketId">{{ order.MarketId }}</router-link></td>
    <td>{{ order.side }} {{ order.quantity }} {{ order.ShareDescription }} @ {{ order.price }} sats
    </td>
    <td :title="order.CreatedAt" class="hidden-sm">{{ ago(new Date(order.CreatedAt)) }}</td>
    <td :class="'font-mono ' + statusClassName + ' ' + selectedClassName">{{ order.Status }}</td>
  </tr>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
import ago from 's-ago'

const props = defineProps(['order', 'selected'])

const order = ref(props.order)

const statusClassName = computed(() => {
  const status = order.value.Status
  if (status === 'EXECUTED') return 'success'
  if (status === 'PENDING') return 'info'
  return 'error'
})

const selectedClassName = computed(() => {
  if (typeof props.selected === 'boolean') {
    return props.selected ? 'selected' : ''
  }
  if (Array.isArray(props.selected)) {
    return props.selected.some(id => id === order.value.Id) ? 'selected' : ''
  }
  return ''
})

</script>

<style scoped>
td {
  padding: 0 0.5em;
}

.selected {
  background-color: #35df8d;
  color: white;
}
</style>
