<script lang="ts">
  import i18n from '$lib/i18n'
  import type { Transaction } from '$lib/types/transaction'

  let props: {
    transactions: Transaction[]
  } = $props()
</script>

<div class="overflow-x-auto mt-4 bg-base-100 rounded-md">
  <table class="table">
    <thead>
      <tr>
        <th>{$i18n.t('common:transactionTable.headerDate')}</th>
        <th>{$i18n.t('common:transactionTable.headerChargepoint')}</th>
        <th>{$i18n.t('common:transactionTable.headerEnergyTotal')}</th>
        <th>{$i18n.t('common:transactionTable.headerCost')}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {#if props.transactions.length > 0}
        {#each props.transactions as transaction}
          <tr>
            <td>
              <div class="flex items-center gap-3">
                <div>
                  <p>
                    {$i18n.t('common:transactionTable.startTime', {
                      time: new Date(transaction.started_at),
                      formatParams: {
                        time: {
                          year: 'numeric',
                          month: 'numeric',
                          day: 'numeric',
                          hour: 'numeric',
                          minute: 'numeric',
                          second: 'numeric',
                        },
                      },
                    })}
                  </p>
                  <p>
                    {$i18n.t('common:transactionTable.endTime', {
                      time: new Date(transaction.ended_at!),
                      formatParams: {
                        time: {
                          year: 'numeric',
                          month: 'numeric',
                          day: 'numeric',
                          hour: 'numeric',
                          minute: 'numeric',
                          second: 'numeric',
                        },
                      },
                    })}
                  </p>
                </div>
              </div>
            </td>
            <td>
              <a href="#/chargepoint/{transaction.chargepoint.id}" class="btn btn-sm btn-primary">
                <i class="bi bi-plug-fill text-lg"></i>
                {transaction.chargepoint.identity}
              </a>
            </td>
            <td class="font-bold"
              >{(transaction.meter_end - transaction.meter_start).toFixed(2)} kWh</td
            >
            <td class="font-bold"
              >{((transaction.meter_end - transaction.meter_start) * transaction.price).toFixed(2)} €</td
            >
            <th>
              <a href="#/transaction/{transaction.id}" class="btn btn-sm btn-primary">
                {$i18n.t('common:transactionTable.detailButton')}
                <i class="bi bi-arrow-right"></i>
              </a>
            </th>
          </tr>
        {/each}
      {/if}
    </tbody>
  </table>
  {#if props.transactions.length === 0}
    <p class="w-full mt-15 mb-15 text-center text-xl font-bold">
      {$i18n.t('common:transactionTable.noPreviousTransactions')}
    </p>
  {/if}
</div>
