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

export type TotalSpendOptions = { amount: AmountValidatorOptions }

const type = CouponsPlus?.components?.conditions?.TotalSpend?.type || 'TotalSpend'
export const TotalSpendMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.PurchaseHistory,
    icon: iconWithClassName(({className, context}) => {
        if (context === 'card') {
            // solid
            return <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-6">
                <path d="M12 7.5a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
                <path fillRule="evenodd" d="M1.5 4.875C1.5 3.839 2.34 3 3.375 3h17.25c1.035 0 1.875.84 1.875 1.875v9.75c0 1.036-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 14.625v-9.75ZM8.25 9.75a3.75 3.75 0 1 1 7.5 0 3.75 3.75 0 0 1-7.5 0ZM18.75 9a.75.75 0 0 0-.75.75v.008c0 .414.336.75.75.75h.008a.75.75 0 0 0 .75-.75V9.75a.75.75 0 0 0-.75-.75h-.008ZM4.5 9.75A.75.75 0 0 1 5.25 9h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75H5.25a.75.75 0 0 1-.75-.75V9.75Z" clipRule="evenodd" />
                <path d="M2.25 18a.75.75 0 0 0 0 1.5c5.4 0 10.63.722 15.6 2.075 1.19.324 2.4-.558 2.4-1.82V18.75a.75.75 0 0 0-.75-.75H2.25Z" />
            </svg>
        }
        // outline
        return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18.75a60.07 60.07 0 0 1 15.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 0 1 3 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 0 0-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 0 1-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 0 0 3 15h-.75M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm3 0h.008v.008H18V10.5Zm-12 0h.008v.008H6V10.5Z" />
        </svg>
    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto',
                direction: "vertical",
            }),
            {id: 'amount.quantity', renderType: FieldType.Number, fieldProps: {type: 'currency', border: false} as NumberProps}
        ]
    ]
}
export const TotalSpendRenderer: CardRenderer<TotalSpendOptions> = {
    type,
    icon: TotalSpendMeta.icon!,
    prefix: '*',
    example: __('$500 or more, $1000 - $2000, etc.'),
    AboveComputedValue: usingTestableOptions<TotalSpendOptions>(({amount: {quantity: {type}}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        /**
         * This gets repeated across multiple components, should be refactored
         */
        switch (type) {
            case "equals":
            case "range":
                return undefined
            case "minimum":
                return __('Minimum Total Spend')
            case "maximum":
                return __('Maximum Total Spend')
            }
    }),
    ComputedValue: usingTestableOptions<TotalSpendOptions>(({amount: {quantity: {amount, type, range}}}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('condition', type).name
        }

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