import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {iconWithClassName} from "../../IconWithClassName"
import {CardRenderer, CardRendererContext} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {findKey, invert} from "lodash";
import {ComponentCategory} from "../../components";
import {inclusionValueValidatorFieldsMap} from "../InclusionValueValidator";

export type PaymentMethodOptions = {
    ids: string[],
    inclusionType: 'allowed' | 'forbidden'
}
const type = CouponsPlus?.components?.conditions?.PaymentMethod?.type || 'PaymentMethod'
export const PaymentMethodMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Checkout,
    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="M4.5 3.75a3 3 0 0 0-3 3v.75h21v-.75a3 3 0 0 0-3-3h-15Z"/>
                <path fillRule="evenodd"
                      d="M22.5 9.75h-21v7.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3v-7.5Zm-18 3.75a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z"
                      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" className="size-6">
            <path strokeLinecap="round" strokeLinejoin="round"
                  d="M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Z"/>
        </svg>

    }),
    fieldsMap: inclusionValueValidatorFieldsMap('conditions', type, undefined, 'ids', {
        options: invert(CouponsPlus?.paymentMethods)
    })
}
export const PaymentMethodRenderer: CardRenderer<PaymentMethodOptions> = {
    type,
    icon: PaymentMethodMeta.icon!,
    prefix: '*',
    example: __('Direct Bank Transfer, PayPal Payments, etc.'),
    AboveComputedValue: usingTestableOptions<PaymentMethodOptions>(({inclusionType}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        if (inclusionType === 'allowed') {
            return __('Eligible Payment Methods')
        } else {
            return __('Ineligible Payment Methods')
        }
    }),
    ComputedValue: usingTestableOptions<PaymentMethodOptions>(({ids}, {context}) => {
        return <div className="grid grid-cols-1 gap-0">
            {ids.map(methodToFind => {
                return <div className="text-base leading-[18px]">
                    {CouponsPlus?.paymentMethods[methodToFind] || methodToFind}
                </div>;
            })}
        </div>;
    }),
}