import { __ } from "../../../globals"
import { ToolTip } from "../../../ToolTip"
import type {CardRenderer, CardRendererContext} from "../../CardRenderers"
import { ComponentMeta } from "../../ComponentsMeta"
import { iconWithClassName } from "../../IconWithClassName"
import {inclusionValueValidatorFieldsMap, InclusionValueValidatorOptions } from "../InclusionValueValidator"
import {usingTestableOptions} from "../CardHelpers";
import {getCardComponentData} from "../../cards";
import {ComponentCategory} from "../../components";
import {InclusionValueValidatorList} from "../InclusionValueValidatorList";

export type CouponsInCartOptions = InclusionValueValidatorOptions
export const CouponsInCartMeta: ComponentMeta = ({
    id: 'CouponsInCart',
    type: 'conditions',
    category: ComponentCategory.Cart,
    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 fillRule="evenodd" d="M1.5 6.375c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v3.026a.75.75 0 0 1-.375.65 2.249 2.249 0 0 0 0 3.898.75.75 0 0 1 .375.65v3.026c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 17.625v-3.026a.75.75 0 0 1 .374-.65 2.249 2.249 0 0 0 0-3.898.75.75 0 0 1-.374-.65V6.375Zm15-1.125a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0v.75a.75.75 0 0 0 1.5 0v-.75Zm-.75 3a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0v-.75a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0V18a.75.75 0 0 0 1.5 0v-.75ZM6 12a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 12Zm.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="M8.25 9.75h4.875a2.625 2.625 0 0 1 0 5.25H12M8.25 9.75 10.5 7.5M8.25 9.75 10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0c1.1.128 1.907 1.077 1.907 2.185Z" />
        </svg>

    }),
    fieldsMap: inclusionValueValidatorFieldsMap('conditions', 'CouponsInCart', (options => ({
        SelectStateProps: {
            afterValues: () =>  options.expectedValues.length && <ToolTip
                id={'category-any'}
                title={options.inclusionType === 'allowed'? __('Required Coupons') : __('Incompatible Coupons')}
                content={[
                    <p className={''}>{options.inclusionType === 'allowed'? __('If the cart does not have at least one of the coupons above, this condition will fail.') : __('If the cart has at least one of the coupons above, this condition will fail.')}</p>
                ]}
                width={'full'}
                background={'lighter'}
                mainContentAlignment={'title'}
                mainContentTextColor={'text-gray-500'}
                titleAndContentGap={'narrower'}
                animationDirection={'bottom-to-top'}
            />

        }
    })))
})

export const CouponsInCartRenderer: CardRenderer<CouponsInCartOptions> =  {
    type: CouponsInCartMeta.id,
    icon: CouponsInCartMeta.icon!,
    example: __('Required Coupons, Incompatible Coupons'),
    prefix: '*',
    ComputedValue: usingTestableOptions<CouponsInCartOptions>((options, {id, context, color}) => {
        if (context === 'tier-base') {
            return getCardComponentData('filter', CouponsInCartMeta.id).name
        }


        return <InclusionValueValidatorList options={options} />
    }),
    AboveComputedValue: usingTestableOptions<CouponsInCartOptions>(({inclusionType, expectedValues}, {id, context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        if (inclusionType === 'allowed') {
            return __('Required Coupons')
        } else {
            return __('Incompatible Coupons')
        }
    }),
}
