import {CardRendererParameters} from "../CardRenderers";
import {useTestable} from "../TestableHooks";
import React from "react";
import {Testable} from "../Testable";
import {OfferData} from "../store";
import {useOffer} from "../OfferHooks";
import {type ComponentMeta} from "../ComponentsMeta";
import {__} from "../../globals";

export const usingTestable = <Options extends (object | false) = {}>(renderer: (testable: Testable<Options>, parameters: CardRendererParameters) => any) => (parameters: CardRendererParameters) => {
    const {id, localData, partialId} = parameters;
    // @ts-ignore
    let idToUse = partialId ? partialId : id;
    const testable = useTestable<Options>(localData ? localData : idToUse)

    if (!testable) {
        console.error('No testable found for CategoriesRenderer', id);
        return <div>?</div>;
    }

    return renderer(testable, parameters);
}
export const usingOffer = <Options extends (object | false) = {}>(renderer: (testable: OfferData<Options>, parameters: CardRendererParameters) => any) => (parameters: CardRendererParameters) => {
    const {id} = parameters;
    // @ts-ignore
    const offer = useOffer<Options>(id)

    if (!offer) {
        console.error('No offer found for CategoriesRenderer', id);
        return <div>?</div>;
    }

    return renderer(offer, parameters);
}
/**
 * The order of the arguments is changed here and differs from the `usingTestable` (the parameters are first)
 *
 * Why? because chances are using this hook you'll only need the options, so the parameters have a higher priority. We're only passing the testable just in case, like a last resort in the few cases that you need it but this function is meant to be used for options only.
 */
export const usingTestableOptions = <Options extends (object | false) = {}>(renderer: (options: Options, parameters: CardRendererParameters, testable: Testable<Options>) => any) => usingTestable<Options>((testable, parameters) => {
    // @ts-ignore
    return renderer(testable.getData()!.options as Options, parameters, testable);
})

export const usingOfferOptions = <Options extends (object | false) = {}>(renderer: (options: Options, parameters: CardRendererParameters, offer: OfferData<Options>) => any) => usingOffer<Options>((offerdata, parameters) => {
    // @ts-ignore
    return renderer(offerdata.options as Options, parameters, offerdata);
})


// to do: possible changing of the colors
export const withPrefix = (prefix: string): ComponentMeta['listTitle'] => (preRenderedTitle) => <div className="flex items-center gap-1">
    {/*<span className={'text-smaller-1 px-2 py-1 rounded-5 bg-blue-20 bg-opacity-40 text-blue-shade-200'}>{prefix}</span>*/}
    <span className={'text-gray-450'}>{prefix}</span>
    {preRenderedTitle}
</div>