import {CouponsPlus} from "../globals"
import {cardRenderers} from "./CardRenderers";
import {ReactNode} from "react";
import {ComponentDataType} from "./store";

export type CardType = {
    type: string,
    name: string,
    description?: string,
    useCases?: {
        title: string,
        content: string[]
    }[],
    notes: string[],
    // escaped individually
    fields: Record<string, Field>,
    defaultOptions: object,
    supports: {
        recursiveness: boolean,
    }
}

export interface Field {
    meta: fieldMeta;
}

export interface Note {
    id: string,
    title: string,
    content: (string | ReactNode)[],
}

export type fieldMeta<ExtraFields extends object = {}> = ExtraFields & {
    name?: string,
    placeholder?: string;
    alternativeLabels?: Record<string, string>,
    labelDescriptions?: Record<string, string>,
    notes?: Record<string, Note>,
    _allowed: any[] | object,
    isImplemented?: boolean | Record<string, boolean>,
    optionsKey?: string;
    display?: string[], // the fields of _allowed that should be displayed in the UI
    displayAliases?: Record<string, string> // when the key is selected, render as if the value is selected. Eg:
    // {'allowed-except-forbidden': 'allowed'} means that if the user selects 'allowed-except-forbidden', it will render as if 'allowed' was selected
    _default: any
}
export const getCardComponentData = (cardType: ComponentDataType, type: string): CardType => {
    return CouponsPlus.components[`${cardType}s`][type]
}

export const getCardRendererFromType = (type: CardType['type']): typeof cardRenderers[keyof typeof cardRenderers][string] | undefined => {
    for (const category in cardRenderers) {
        const cardRenderer = cardRenderers[category][type];

        if (cardRenderer) {
            return cardRenderer;
        }
    }

    return undefined;
}