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 {fieldsCacheContainer} from "../FieldsCache";
import {CardItemSecondaryValue, CartItemSecondaryValueProps} from "../CardItemSecondaryValue";
import {usingTestableOptions} from "./CardHelpers";
import {iconWithClassName} from "../IconWithClassName";
import {inclusionValueValidatorFieldsMap, InclusionValueValidatorOptions} from "./InclusionValueValidator";
import {colors} from "../Colors";
import React from "react";
import {request} from "../Color";

export type CategoriesOptions = InclusionValueValidatorOptions
export const CategoriesMeta: ComponentMeta = IncompatibleWithAnyProducts({
    id: 'InCategories',
    type: 'filters',
    category: 'common',
    priority: 20,
    supportsCustomTitleForSuggestedScopes: (suggestedScope) => true,
    description: ({suggestedScope}) => {
        if (!suggestedScope) {
            return ''
        } else if(suggestedScope === 'bogo') {
            return __('Select the categories that the customer must buy to be eligible for the BOGO offer.')
        } else if (suggestedScope === 'item_discounts') {
            return __('Select the categories that will be discounted.')
        } else if (suggestedScope === 'cart_discounts') {
            return __('Select the categories 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">
                <path
                    d="M5.566 4.657A4.505 4.505 0 0 1 6.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0 0 15.75 3h-7.5a3 3 0 0 0-2.684 1.657ZM2.25 12a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3v-6ZM5.25 7.5c-.41 0-.806.055-1.184.157A3 3 0 0 1 6.75 6h10.5a3 3 0 0 1 2.683 1.657A4.505 4.505 0 0 0 18.75 7.5H5.25Z"/>
            </svg>
        }
        // outline
        return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5}
                    stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round"
                  d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"/>
        </svg>
    }),
    fieldsMap: inclusionValueValidatorFieldsMap('filters', 'InCategories', (options => ({
        SelectStateProps: {
            afterValues: () => false && options.inclusionType === 'allowed' && <ToolTip
                id={'category-any'}
                title={__('Want to take at least one item of each category?')}
                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 CategoriesRenderer: CardRenderer<CategoriesOptions> = {
    type: CategoriesMeta.id,
    icon: CategoriesMeta.icon!,
    example: __('Clothing except Hoodies, Shoes, Accessories, etc.'),
    ComputedValue: usingTestableOptions<CategoriesOptions>(({inclusionType, expectedValues, excludedSubsetValues}, {
        id,
        context,
        color
    }) => {
        if (context === 'tier-base') {
            return getCardComponentData('filter', CategoriesMeta.id).name
        }

        const categoryLabel = (value: string) => {
            return <span className="text-base leading-[18px]">{fieldsCacheContainer.get('categories').get(value)?.label || '?'}</span>;
        }

        const categories = (value, index) => {
            return <div className="">
                <div className="flex items-center space-x-[2px]">
                    {false && expectedValues.length > 1 && (inclusionType === 'allowed' ?
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                             className="min-w-[10px] min-h-[10px] max-w-[10px] max-h-[10px] opacity-40">
                            <path fillRule="evenodd"
                                  d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm13.36-1.814a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                                  clipRule="evenodd"/>
                        </svg> : <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"
                                      className="min-w-[10px] min-h-[10px] max-w-[10px] max-h-[10px] opacity-70">
                            <path fill-rule="evenodd"
                                  d="m6.72 5.66 11.62 11.62A8.25 8.25 0 0 0 6.72 5.66Zm10.56 12.68L5.66 6.72a8.25 8.25 0 0 0 11.62 11.62ZM5.105 5.106c3.807-3.808 9.98-3.808 13.788 0 3.808 3.807 3.808 9.98 0 13.788-3.807 3.808-9.98 3.808-13.788 0-3.808-3.807-3.808-9.98 0-13.788Z"
                                  clip-rule="evenodd"/>
                        </svg>)}
                    {categoryLabel(value)}
                </div>
            </div>
        };

        let hasExcludedCategories = !!(inclusionType === 'allowed' && excludedSubsetValues.length);

        return <div className="grid grid-cols-1 gap-1">
            {expectedValues.map(categories)}
            {expectedValues.length === 0 &&
                <span
                    className={`text-base ${request(color)?.text?.(60) ?? colors.purple.text(60)}`}>{__('Select Categories')}</span>}
            {hasExcludedCategories && (<div className="">
                <CardItemSecondaryValue color={color}>
                    {__('Except')}
                </CardItemSecondaryValue>
                {excludedSubsetValues.map(categories)}
            </div>)}
        </div>
    }),
    AboveComputedValue: usingTestableOptions<CategoriesOptions>(({inclusionType, expectedValues}, {id, context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        // @ts-ignore
        return {
            classNames: '---pl-[10px] --min-w-20',
            label: inclusionType === 'forbidden' ? __('Excluding') : undefined,
        } as CartItemSecondaryValueProps

    }),
}