import {getCardComponentData} from "../cards";
import {CardRenderer, CardRendererContext} from "../CardRenderers";
import {ComponentMeta} from "../ComponentsMeta";
import {__, CouponsPlus} from "../../globals";
import {AmountValidatorOptions} from "./filterinterfaces";
import {FieldType} from "../fields";
import {usingTestableOptions} from "./CardHelpers";
import {iconWithClassName} from "../IconWithClassName";
import {NumberProps} from "../fields/Number";
import {getWithCurrency} from "../fields/Currency";
import {ComponentCategory} from "../components";
import {RowOptions} from "./Fields/RowOptions";

export type ItemPriceOptions = AmountValidatorOptions

const type = CouponsPlus?.components?.filters?.ItemPrice?.type || 'ItemPrice'
export const ItemPriceMeta: ComponentMeta = {
    id: type,
    type: 'filters',
    category: ComponentCategory.Filter_Price,
    supportsCustomTitleForSuggestedScopes: (suggestedScope) => ['bogo'].includes(suggestedScope),
    icon: iconWithClassName(({className, context}) => {
        if (context === 'card') {
            // solid
            return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                <path d="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z" />
                <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v.816a3.836 3.836 0 0 0-1.72.756c-.712.566-1.112 1.35-1.112 2.178 0 .829.4 1.612 1.113 2.178.502.4 1.102.647 1.719.756v2.978a2.536 2.536 0 0 1-.921-.421l-.879-.66a.75.75 0 0 0-.9 1.2l.879.66c.533.4 1.169.645 1.821.75V18a.75.75 0 0 0 1.5 0v-.81a4.124 4.124 0 0 0 1.821-.749c.745-.559 1.179-1.344 1.179-2.191 0-.847-.434-1.632-1.179-2.191a4.122 4.122 0 0 0-1.821-.75V8.354c.29.082.559.213.786.393l.415.33a.75.75 0 0 0 .933-1.175l-.415-.33a3.836 3.836 0 0 0-1.719-.755V6Z" clipRule="evenodd" />
            </svg>
        }
        // outline
        return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" >
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto'
            }),
            {id: 'quantity', renderType: FieldType.Number, fieldProps: {type: 'currency', border: false} as NumberProps}
        ]
    ]
}
export const ItemPriceRenderer: CardRenderer<ItemPriceOptions> = {
    type,
    icon: ItemPriceMeta.icon!,
    prefix: '[With] [Specific] *',
    AboveComputedValue: usingTestableOptions<ItemPriceOptions>(({quantity: {type}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        switch (type) {
            case "equals":
            case "range":
                return __('Item Price')
            case "minimum":
                return __('Minimum Item Price')
            case "maximum":
                return __('Maximum Item Price')
        }

    }),
    ComputedValue: usingTestableOptions<ItemPriceOptions>(({quantity: {amount, type, range}}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('filter', type).name
        }

        switch (type) {
            case "equals":
            case "minimum":
            case "maximum":
                return getWithCurrency(amount)
            case "range":
                return `${getWithCurrency(range.minimum)} - ${getWithCurrency(range.maxmimum)}`
        }

    }),
}