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

export type UserIDOptions = {
    ids: string[],
    inclusionType: 'allowed' | 'forbidden'
}
const type = CouponsPlus?.components?.conditions?.UserID?.type || 'UserID'
export const UserIDMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Account,
    priority: 5,
    supportsTiers: false,
    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="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z"
                      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="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z"/>
        </svg>
    }),
    fieldsMap: inclusionValueValidatorFieldsMap('conditions', type, undefined, 'ids')
};
export const UserIDRenderer: CardRenderer<UserIDOptions> = {
    type,
    icon: UserIDMeta.icon!,
    prefix: '*',
    example: __(''),
    AboveComputedValue: usingTestableOptions<UserIDOptions>(({inclusionType}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        return inclusionType === 'allowed' ? __('Eligible Users') : __('Ineligible Users')
    }),
    ComputedValue: usingTestableOptions<UserIDOptions>(({ids}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('condition', UserIDMeta.id).name
        }
        if (!ids || ids.length === 0) {
            return <span className="opacity-60">{__('Select a user')}</span>
        }

        return <div className="grid grid-cols-1 gap-0">
            {ids.map((id) => {
                const userOption = fieldsCacheContainer.get('users').get(id);
                return <div className="text-base leading-[18px]">
                    {userOption?.label || `ID ${id}`}
                </div>;
            })}
        </div>;
    }),
}