import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {iconWithClassName} from "../../IconWithClassName"
import {CardRenderer, CardRendererContext} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {ComponentCategory} from "../../components";
import {CustomFieldComputedValue, customFieldFieldsMap, CustomFieldOptions} from "./CustomField";

export type CheckoutFieldOptions = CustomFieldOptions
const type = CouponsPlus?.components?.conditions?.CheckoutField?.type || 'CheckoutField'
export const CheckoutFieldMeta: 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" className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
            </svg>
        }
        // outline
        return <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
        </svg>
    }),
    // @ts-ignore
    fieldsMap: customFieldFieldsMap
}

export const CheckoutFieldRenderer: CardRenderer<CheckoutFieldOptions> = {
    type,
    icon: CheckoutFieldMeta.icon!,
    prefix: '*',
    example: __('Field: Number of seats: Minimum 10'),
    AboveComputedValue: usingTestableOptions<CheckoutFieldOptions>(({}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        return __('Required Checkout Field');
    }),
    ComputedValue: CustomFieldComputedValue,
}