---
import { client } from '../../db/typesense';
import { db } from '../../db';
import RarityIcon from '../../components/RarityIcon.astro';

export const prerender = false;

// get the query from post request using form data
const formData = await Astro.request.formData();
const query = formData.get('q')?.toString() || '';
const start = Number(formData.get('start')?.toString() || '0');
const filters = Array.from(formData.entries())
    .filter(([key, value]) => key !== 'q' && key !== 'start')
    .reduce((acc, [key, value]) => {
        if (!acc[key]) {
            acc[key] = [];
        }
        acc[key].push(value.toString());
        return acc;
    }, {} as Record<string, string[]>);

const filterChecked = (field: string, value: string) => {
    return (filters[field]?.includes(value) ?? false) ? 'checked' : '';
};

const filterBy = Object.entries(filters).map(([field, values]) => {
    return `${field}:=[${values.join(',')}]`;
}).join(' && ');

// use typesense to search for cards matching the query and return the productIds of the results
const searchResults = await client.collections('cards').documents().search({
    q: query,
    filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`,
    query_by: 'productLineName,productName,setName,number,rarityName,Artist',
    per_page: 20,
    facet_by: 'productLineName,setName,rarityName,cardType,energyType',
    page: Math.floor(start / 20) + 1,
});
const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
const totalHits = searchResults.found;
const facets = searchResults.facet_counts;

// get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
const pokemon = await db.query.cards.findMany({
    where: { productId: { in: productIds, }, },
    with: {
        prices: true,
        set: true,
    }
});

// format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
const formatPrice = (price:any) => {
    if (price === null) {
        return "—";
    }
    price = Number(price);
    if (price > 99.99)  return `$${Math.round(price)}`;
    return `$${price.toFixed(2)}`;
};

const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
const conditionShort = (condition:string) => {
    return {
        "Near Mint": "NM",
        "Lightly Played": "LP",
        "Moderately Played": "MP",
        "Heavily Played": "HP",
        "Damaged": "DMG"
    }[condition] || condition.split(' ').map((w) => w[0]).join('');
}

const facetNames = (name:string) => {
    return {
        "productLineName": "Product Line",
        "setName": "Set",
        "rarityName": "Rarity",
        "cardType": "Card Type",
        "energyType": "Energy Type"
    }[name] || name;
}

---
{(start === 0) &&
    <script define:vars={{ totalHits, filters, facets }} is:inline>
        let hits = totalHits;
    </script>

    <div id="facetContainer" hx-swap-oob="true">
        {facets.map((facet) => (
            <div class="mb-4">
                <div class="h5">{facetNames(facet.field_name)}</div>
                {facet.counts.map((count) => (
                    <div>
                        <label class="form-check-label">
                            <!--<input type="checkbox" name={facet.field_name} value={count.value} class="form-check-input" hx-get="/partials/cards" hx-target="#cardGrid" hx-include="#searchform" hx-trigger="change" hx-swap="outerHTML" hx-on--after-request="afterUpdate(event)" /> -->
                            <input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
                            {count.value} ({count.count})
                        </label>
                    </div>
                ))}
            </div>
        ))}
    </div>

}

{pokemon.map((card) => (
    <div class="col">
        <div class="inventory-button position-relative float-end shadow-filter text-center d-none">
            <div class="inventory-label pt-2">+/-</div>
        </div>
        <div hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
            <img src={`/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-3 mb-2 card-image image-grow w-100" onerror="this.onerror=null;this.src='/cards/noImage.webp'"/>
        </div>
        <div class="row row-cols-5 gx-1 price-row mb-2">
        {card.prices
            .slice()
            .sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition))
            .filter((price, index, arr) =>
            arr.findIndex(p => p.condition === price.condition) === index
            )
            .map((price) => (
            <div class="col price-label ps-1">
                { conditionShort(price.condition) }
                <br />{formatPrice(price.marketPrice)}
            </div>
            ))}
        </div>
        <div class="h5 my-0">{card.productName}</div>
        <div class="d-flex flex-row lh-1 mt-1">
            <div class="text-secondary flex-grow-1">{card.set?.setCode}</div>
            <div class="text-secondary">{card.number}</div>
            <span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
        </div>
        <div>{card.variant}<span class="d-none">{card.productId}</span></div>
    </div>

))}
{start + 20 < totalHits &&
    <div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
        Loading...
    </div>
}