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

export type CustomerPurchaseHistoryOptions = { numberOfItems: AmountValidatorOptions }

const type = CouponsPlus?.components?.conditions?.CustomerPurchaseHistory?.type || 'CustomerPurchaseHistory'
export const CustomerPurchaseHistoryMeta: 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="M9.195 18.44c1.25.714 2.805-.189 2.805-1.629v-2.34l6.945 3.968c1.25.715 2.805-.188 2.805-1.628V8.69c0-1.44-1.555-2.343-2.805-1.628L12 11.029v-2.34c0-1.44-1.555-2.343-2.805-1.628l-7.108 4.061c-1.26.72-1.26 2.536 0 3.256l7.108 4.061Z" />
            </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="M21 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061A1.125 1.125 0 0 1 21 8.689v8.122ZM11.25 16.811c0 .864-.933 1.406-1.683.977l-7.108-4.061a1.125 1.125 0 0 1 0-1.954l7.108-4.061a1.125 1.125 0 0 1 1.683.977v8.122Z" />
        </svg>


    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto',
                direction: "vertical",
            }),
            {id: 'numberOfItems.quantity', renderType: FieldType.Number, fieldProps: {border: false} as NumberProps}
        ]
    ]
}
export const CustomerPurchaseHistoryRenderer: CardRenderer<CustomerPurchaseHistoryOptions> = {
    type,
    icon: CustomerPurchaseHistoryMeta.icon!,
    prefix: '*',
    example: __('1 item, more than 5 items, 5-10 items, etc.'),
    AboveComputedValue: usingTestableOptions<CustomerPurchaseHistoryOptions>(({numberOfItems: {quantity: {type}}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        return __('Customer has purchased')
    }),
    ComputedValue: usingTestableOptions<CustomerPurchaseHistoryOptions>(({numberOfItems: {quantity: {amount, type, range}}}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('condition', type).name
        }

        switch (type) {
            case "equals":
                return __('* items').replace('*', amount)
            case "minimum":
                return __('* or more items').replace('*', amount)
            case "maximum":
                return __('A max. of * items').replace('*', amount)
            case "range":
                return __('[1]-[2] items').replace('[1]', range.minimum).replace('[2]', range.maxmimum)
        }

    }),
}