import {CardRenderer, CardRendererContext, CardRendererParameters} from "../CardRenderers";
import {getCardComponentData} from "../cards";
import {ComponentMeta, getComponentMetaData} from "../ComponentsMeta";
import {IncompatibleWithAnyProducts} from "../IncompatibleWithAnyProducts";
import {ToolTip} from "../../ToolTip";
import {__} from "../../globals";
import {useTestableData} from "../hooks";
import {useTestable} from "../TestableHooks";
import {test} from "vitest";
import {fieldsCacheContainer} from "../FieldsCache";
import {CardItemSecondaryValue, CartItemSecondaryValueProps} from "../CardItemSecondaryValue";
import {usingTestable} from "./CardHelpers";
import testable from "../../Testable";
import classNames from "classnames";
import {iconWithClassName} from "../IconWithClassName";
import {inclusionValueValidatorFieldsMap, InclusionValueValidatorOptions} from "./InclusionValueValidator";
import {colors} from "../Colors";
import React from "react";
import {color} from "motion";
import {request} from "../Color";

export type TagsOptions = InclusionValueValidatorOptions
export const TagsMeta: ComponentMeta = IncompatibleWithAnyProducts({
    id: 'InTags',
    type: 'filters',
    category: 'common',
    supportsCustomTitleForSuggestedScopes: (suggestedScope) => true,
    description: ({suggestedScope}) => {
        if (!suggestedScope) {
            return ''
        } else if(suggestedScope === 'bogo') {
            return __('Select the tags that the customer must buy to be eligible for the BOGO offer.')
        } else if (suggestedScope === 'item_discounts') {
            return __('Select the tags that will be discounted.')
        } else if (suggestedScope === 'cart_discounts') {
            return __('Select the tags 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 fillRule="evenodd"
                      d="M2.25 4.125c0-1.036.84-1.875 1.875-1.875h5.25c1.036 0 1.875.84 1.875 1.875V17.25a4.5 4.5 0 1 1-9 0V4.125Zm4.5 14.25a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z"
                      clipRule="evenodd"/>
                <path
                    d="M10.719 21.75h9.156c1.036 0 1.875-.84 1.875-1.875v-5.25c0-1.036-.84-1.875-1.875-1.875h-.14l-8.742 8.743c-.09.089-.18.175-.274.257ZM12.738 17.625l6.474-6.474a1.875 1.875 0 0 0 0-2.651L15.5 4.787a1.875 1.875 0 0 0-2.651 0l-.1.099V17.25c0 .126-.003.251-.01.375Z"/>
            </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="M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z"/>
        </svg>
    }),
    fieldsMap: inclusionValueValidatorFieldsMap('filters', 'InTags', (({inclusionType, expectedValues}) => ({
        SelectStateProps: {
            afterValues: () => inclusionType === 'allowed' && expectedValues.length > 1 && <ToolTip
                id={'tag-any'}
                title={__('Want at least one of these tags to be present in every item?')}
                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 TagsRenderer: CardRenderer<TagsOptions> = {
    type: TagsMeta.id,
    icon: TagsMeta.icon!,
    example: __('Outerwear, Casual, Formal, Summer, Winter, etc.'),
    ComputedValue: usingTestable<TagsOptions>((testable, {id, context, color}) => {
        if (!testable) {
            console.error('No testable found for TagsRenderer', id);
            return <div>?</div>;
        }

        if (context === 'tier-base') {
            return getCardComponentData('filter', TagsMeta.id).name
        }

        const {options: {expectedValues, inclusionType}} = testable.getData()!

        if (context === 'testable' || context === 'tier-subchild') {
            return <div className="grid grid-cols-1 gap-0 mt-1">
                {expectedValues.length === 0 &&
                    <span
                        className={`text-base ${request(color)?.text?.(60) ?? colors.purple.text(60)}`}>{__('Select Tags')}</span>}
                {expectedValues.map((value, index) => {
                    return <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>)}
                        <span
                            className="text-base leading-[18px]">{fieldsCacheContainer.get('tags').get(value)?.label || '?'}</span>
                    </div>
                })}
            </div>;
        }
    }),
    AboveComputedValue: usingTestable<TagsOptions>((testable, {id, context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        const {options: {expectedValues, inclusionType}} = testable.getData()!

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

    }),
}