import { api, LightningElement } from "lwc";
import Grid from "dx/grid";
import { DocsCard } from "typings/custom";
import { toJson } from "dxUtils/normalizers";
import { WidgetConfig } from "dx/cardClickthrough";

export type CardConfig<T extends "badge" | "icon-button"> = Omit<
    DocsCard,
    "href"
> & {
    href?: string;
    widgetConfig: WidgetConfig<T>;
};

export default class CardGrid<
    T extends "badge" | "icon-button"
> extends LightningElement {
    private _cards: CardConfig<T>[] = [];

    @api
    get cards() {
        return this._cards;
    }
    set cards(value: any) {
        const cards = toJson(value);
        this._cards = cards.map((card: any) => ({
            ...card,
            widgetConfig: JSON.stringify(card.widgetConfig)
        }));
    }

    @api numColumns: Grid["columns"] = "three";
}