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 {amountValidatorTierFields, TierType} from "../../tiers";
import classNames from "classnames";
import {ComponentCategory} from "../../components";
import {RowOptions} from "../Fields/RowOptions";

export type CartSubtotalOptions = AmountValidatorOptions

const type = CouponsPlus?.components?.conditions?.CartSubtotal?.type || 'CartSubtotal'
export const CartSubtotalMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Cart,
    supportsTiers: true,
    tierFields: amountValidatorTierFields(),
    tierType: TierType.Numeric,
    configurable: context => context !== 'tier-base',
    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="M2.25 2.25a.75.75 0 0 0 0 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 0 0-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 0 0 0-1.5H5.378A2.25 2.25 0 0 1 7.5 15h11.218a.75.75 0 0 0 .674-.421 60.358 60.358 0 0 0 2.96-7.228.75.75 0 0 0-.525-.965A60.864 60.864 0 0 0 5.68 4.509l-.232-.867A1.875 1.875 0 0 0 3.636 2.25H2.25ZM3.75 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM16.5 20.25a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Z"/>
            </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 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"/>
        </svg>

    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto'
            }),
            {id: 'quantity', renderType: FieldType.Number, fieldProps: {type: 'currency', border: false} as NumberProps}
        ]
    ]
}
export const CartSubtotalRenderer: CardRenderer<CartSubtotalOptions> = {
    type,
    icon: CartSubtotalMeta.icon!,
    prefix: scope => scope === 'tier-base' ? __('*') : __('[A] [Specific] *'),
    example: scope => scope === 'tier-base' ? __('$100 min. -> 10% OFF, $200 min. -> 20% OFF, etc.') : __('Minimum, Maximum or in Range'),
    AboveComputedValue: usingTestableOptions<CartSubtotalOptions>(({quantity: {type}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

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

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

        let value: string | number | undefined = ''
        switch (type) {
            case "equals":
            case "minimum":
            case "maximum":
                value = getWithCurrency(amount)
                break
            case "range":
                value = `${getWithCurrency(range.minimum)} - ${getWithCurrency(range.maxmimum)}`
                break
        }

        if (context === 'tier-subchild') {
            return <span className={classNames('flex', {
                'items-end space-x-1': type === 'maximum',
                'items-center space-x-0': type === 'minimum'
            })}>
                <span>{value}</span>
                {type === 'minimum' && <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                                            className="min-w-3 min-h-3 max-w-3 max-h-3">
                    <path
                        d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z"/>
                </svg>}
                {type === 'maximum' && <span className="text-smaller-1 opacity-60 leading-[20px]">{__('max.')}</span>}
            </span>
        }

        return value
    }),
}