---
import Layout from '../layouts/Main.astro';
import RarityIcon from "../components/RarityIcon.astro";

//import { eq } from 'drizzle-orm';
import { db } from '../db';
//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" },
    limit: 32,
    with: {
        prices: true,
    }
});

const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
---

<Layout>
<div class="container">
    <h1 class="my-5">Rigid's app thing</h1>
    <div class="row">
        <div class="col-sm-12 col-md-2">
            <div class="h5">Inventory management placeholder</div>
        </div>
        <div class="col-sm-12 col-md-10">
                <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
            {pokemon.map((card) => (
                <div class="col">
                    <img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
                    <div class="row row-cols-2">
                        <div class="col-auto h6">{card.productName}</div>
                        <div class="col-auto ms-auto copy-small">{card.number}</div>
                    </div>
                    <div class="row justify-content-end">
                        <div class="col-auto ms-auto">
                            <RarityIcon rarity={card.rarityName} />
                        </div>
                    </div>
                    <div class="row row-cols-5 gx-0 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 copy-small p price-label">
                            {price.condition.split(' ').map((w) => w[0]).join('')}
                            <br />${price.marketPrice}
                        </div>
                        ))}
                    </div>
                </div>
            ))}

        </div>
        </div>
    </div>
    
</div>
</Layout>