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

export type ShippingMethodOptions = {
    ids: string[],
    inclusionType: 'allowed' | 'forbidden'
}
const type = CouponsPlus?.components?.conditions?.ShippingMethod?.type || 'ShippingMethod'
export const ShippingMethodMeta: 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="M19.5 22.5a3 3 0 0 0 3-3v-8.174l-6.879 4.022 3.485 1.876a.75.75 0 1 1-.712 1.321l-5.683-3.06a1.5 1.5 0 0 0-1.422 0l-5.683 3.06a.75.75 0 0 1-.712-1.32l3.485-1.877L1.5 11.326V19.5a3 3 0 0 0 3 3h15Z"/>
                <path
                    d="M1.5 9.589v-.745a3 3 0 0 1 1.578-2.642l7.5-4.038a3 3 0 0 1 2.844 0l7.5 4.038A3 3 0 0 1 22.5 8.844v.745l-8.426 4.926-.652-.351a3 3 0 0 0-2.844 0l-.652.351L1.5 9.589Z"/>
            </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.75 9v.906a2.25 2.25 0 0 1-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 0 0 1.183 1.981l6.478 3.488m8.839 2.51-4.66-2.51m0 0-1.023-.55a2.25 2.25 0 0 0-2.134 0l-1.022.55m0 0-4.661 2.51m16.5 1.615a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V8.844a2.25 2.25 0 0 1 1.183-1.981l7.5-4.039a2.25 2.25 0 0 1 2.134 0l7.5 4.039a2.25 2.25 0 0 1 1.183 1.98V19.5Z"/>
        </svg>

    }),
    fieldsMap: inclusionValueValidatorFieldsMap('conditions', type, undefined, 'ids', {
        options: invert(CouponsPlus?.shippingMethods)
    })
}
export const ShippingMethodRenderer: CardRenderer<ShippingMethodOptions> = {
    type,
    icon: ShippingMethodMeta.icon!,
    prefix: '*',
    example: '',
    AboveComputedValue: usingTestableOptions<ShippingMethodOptions>(({inclusionType}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

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