---
//import { eq } from 'drizzle-orm';
import { isConditionalExpression } from 'typescript';
import { db } from '../db';
import RarityIcon from './RarityIcon.astro';
//import * as schema from '../db/schema.ts';

// Get some sample Pokemon data from the database
//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
const pokemon = await db.query.cards.findMany({
    where: { productLineName: "pokemon", },
    orderBy: (cards, { desc }) => [desc(cards.marketPrice)],
    limit: 320,
    with: {
        prices: true,
        set: true,
    }
});


const formatPrice = (price:any) => {
    if (price === null) {
        return "–";
    }
    price = Number(price);
    if (price >= 99.99) {
        return `${Math.round(price)}`;
    }
    return `${price.toFixed(2)}`;
};

const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---
{pokemon.map((card) => (
    <div class="col">
        <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="img-fluid rounded-3 mb-2 card-image w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
        <div class="h6 my-0">{card.productName}</div>
        <div class="d-flex justify-content-between align-items-end">
            <div class="copy-small">{card.number}</div>
            <RarityIcon rarity={card.rarityName} />
        </div>
        <div class="copy-small">{card.set?.setName}</div>
        <div class="row row-cols-5 gx-1 mt-1">
        {card.prices
            .slice()
            .sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
            .filter((price, index, arr) =>
            arr.findIndex(p => p.condition === price.condition) === index
            )
            .map((price) => (
            <div class="col p price-label">
                {price.condition.split(' ').map((w) => w[0]).join('')}
                <br />${formatPrice(price.marketPrice)}
            </div>
            ))}
        </div>
    </div>
))}