import { StateController } from '@lit-app/state';
import { LitElement, css, html } from 'lit';
import { customElement, property } from 'lit/decorators.js';

import { type WalletHistory, wallet } from '@/wallet';

import formatDateTime from '@/utils/formatDateTime';
import satsComma from '@/utils/satsComma';
import '@components/General/Card';
import '@components/General/Input';

@customElement('arx-wallet-transaction-line')
export class WalletTransactionLine extends LitElement {
  @property({ type: Object }) transaction!: WalletHistory;

  override connectedCallback(): void {
    super.connectedCallback();
    new StateController(this, wallet);
  }

  static override styles = css`
    :host {
      display: block;
      width: 100%;
      border-bottom: 1px solid var(--color-base-200);
      container-type: inline-size;
    }

    .transaction {
      display: grid;
      grid-template-columns: 200px 1fr auto;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
    }

    .in {
      color: var(--color-success);
    }

    .out {
      color: var(--color-error);
    }

    .amount {
      text-align: right;
      font-family: var(--font-mono);
      font-weight: bold;
      margin-right: 10px;
    }

    .date {
      color: var(--color-secondary);
      font-size: 0.9em;
    }

    .profiles {
      display: flex;
      gap: 10px;
    }

    .sender {
      order: 1;
    }

    .recipient {
      order: 2;
    }

    @container (max-width: 400px) {
      .transaction {
        grid-template-columns: 1fr;
      }

      .amount {
        text-align: left;
      }
    }
  `;

  override render() {
    return html`<div class="transaction ${this.transaction.direction}">
      <span class="amount">
        ${this.transaction.direction === 'in' ? '+' : '-'} ${satsComma(this.transaction.amount)}
        sats
      </span>
      <span class="date">${formatDateTime(this.transaction.created_at * 1000)}</span>
      <div class="profiles">
        <arx-nostr-profile
          pubkey=${this.transaction.senderPubkey}
          class="sender"
        ></arx-nostr-profile>
        <arx-nostr-profile
          pubkey=${this.transaction.recipientPubkey}
          class="recipient"
        ></arx-nostr-profile>
      </div>
    </div>`;
  }
}
