import {CardRenderer, CardRendererContext} from "../CardRenderers";
import {getCardComponentData} from "../cards";
import {ComponentMeta} from "../ComponentsMeta";
import {IncompatibleWithAnyProducts} from "../IncompatibleWithAnyProducts";
import {ToolTip} from "../../ToolTip";
import {__} from "../../globals";
import {usingTestableOptions} from "./CardHelpers";
import {iconWithClassName} from "../IconWithClassName";
import {inclusionValueValidatorFieldsMap, InclusionValueValidatorOptions} from "./InclusionValueValidator";
import {InclusionValueValidatorList} from "./InclusionValueValidatorList";
import {colors} from "../Colors";
import React from "react";
import {request} from "../Color";

export type BrandsOptions = InclusionValueValidatorOptions
export const BrandsMeta: ComponentMeta = IncompatibleWithAnyProducts({
    id: 'InBrands',
    type: 'filters',
    category: 'common',
    priority: 30,
    supportsCustomTitleForSuggestedScopes: (suggestedScope) => true,
    description: ({suggestedScope}) => {
        if (!suggestedScope) {
            return ''
        } else if(suggestedScope === 'bogo') {
            return __('Select the brands that the customer must buy to be eligible for the BOGO offer.')
        } else if (suggestedScope === 'item_discounts') {
            return __('Select the brand that will be discounted.')
        } else if (suggestedScope === 'cart_discounts') {
            return __('Select the brand that will trigger the cart discount when purchased.')
        }
    },
    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="M2.25 2.25a.75.75 0 0 0 0 1.5H3v10.5a3 3 0 0 0 3 3h1.21l-1.172 3.513a.75.75 0 0 0 1.424.474l.329-.987h8.418l.33.987a.75.75 0 0 0 1.422-.474l-1.17-3.513H18a3 3 0 0 0 3-3V3.75h.75a.75.75 0 0 0 0-1.5H2.25Zm6.54 15h6.42l.5 1.5H8.29l.5-1.5Zm8.085-8.995a.75.75 0 1 0-.75-1.299 12.81 12.81 0 0 0-3.558 3.05L11.03 8.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l2.47-2.47 1.617 1.618a.75.75 0 0 0 1.146-.102 11.312 11.312 0 0 1 3.612-3.321Z"
                      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="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5m.75-9 3-3 2.148 2.148A12.061 12.061 0 0 1 16.5 7.605"/>
        </svg>

    }),
    fieldsMap: inclusionValueValidatorFieldsMap('filters', 'InBrands', (options => ({
        SelectStateProps: {
            afterValues: () => false && options.inclusionType === 'allowed' && <ToolTip
                id={'category-any'}
                title={__('Want to take at least one item of each brand?')}
                content={[
                    <p className={''}>{__('Add a combination of products')}
                        <button className="inline">{__('View examples')} +</button>
                    </p>
                ]}
                width={'full'}
                background={'lighter'}
                mainContentAlignment={'title'}
                mainContentTextColor={'text-gray-500'}
                titleAndContentGap={'narrower'}
                animationDirection={'bottom-to-top'}
            />

        }
    })))
})

export const BrandsRenderer: CardRenderer<BrandsOptions> = {
    type: BrandsMeta.id,
    icon: BrandsMeta.icon!,
    example: __('Apple, Samsung, Google, etc.'),
    ComputedValue: usingTestableOptions<BrandsOptions>((options, {id, context, color}) => {
        if (context === 'tier-base') {
            return getCardComponentData('filter', BrandsMeta.id).name
        }

        if (options.expectedValues.length === 0) {
            return <span
                className={`text-base ${request(color)?.text?.(60) ?? colors.purple.text(60)}`}>{__('Select Brands')}</span>
        }
        if (context === 'testable' || context === 'tier-subchild') {
            return <InclusionValueValidatorList options={options}/>
        }
    }),
    AboveComputedValue: usingTestableOptions<BrandsOptions>(({inclusionType, expectedValues}, {id, context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        return inclusionType === 'forbidden' ? __('Excluding') : undefined // undefined will make the decorator render the normal name
    }),
}