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

export type UserRoleOptions = {
    roles: string[],
    inclusionType: 'allowed' | 'forbidden'
}
const type = CouponsPlus?.components?.conditions?.UserRole?.type || 'UserRole'
export const UserRoleMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Account,
    priority: 1,
    supportsTiers: true,
    tierFields: ['roles'],
    tierType: TierType.Fixed,
    configurable: context => context !== 'tier-base', // only 'allowed' is allowed in base tier
    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="M7.5 5.25a3 3 0 0 1 3-3h3a3 3 0 0 1 3 3v.205c.933.085 1.857.197 2.774.334 1.454.218 2.476 1.483 2.476 2.917v3.033c0 1.211-.734 2.352-1.936 2.752A24.726 24.726 0 0 1 12 15.75c-2.73 0-5.357-.442-7.814-1.259-1.202-.4-1.936-1.541-1.936-2.752V8.706c0-1.434 1.022-2.7 2.476-2.917A48.814 48.814 0 0 1 7.5 5.455V5.25Zm7.5 0v.09a49.488 49.488 0 0 0-6 0v-.09a1.5 1.5 0 0 1 1.5-1.5h3a1.5 1.5 0 0 1 1.5 1.5Zm-3 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clipRule="evenodd" />
              <path d="M3 18.4v-2.796a4.3 4.3 0 0 0 .713.31A26.226 26.226 0 0 0 12 17.25c2.892 0 5.68-.468 8.287-1.335.252-.084.49-.189.713-.311V18.4c0 1.452-1.047 2.728-2.523 2.923-2.12.282-4.282.427-6.477.427a49.19 49.19 0 0 1-6.477-.427C4.047 21.128 3 19.852 3 18.4Z" />
            </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="M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 0 0 .75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 0 0-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0 1 12 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 0 1-.673-.38m0 0A2.18 2.18 0 0 1 3 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 0 1 3.413-.387m7.5 0V5.25A2.25 2.25 0 0 0 13.5 3h-3a2.25 2.25 0 0 0-2.25 2.25v.894m7.5 0a48.667 48.667 0 0 0-7.5 0M12 12.75h.008v.008H12v-.008Z" />
            </svg>

    }),
    fieldsMap: (d, scope) => inclusionValueValidatorFieldsMap('conditions', type, undefined, 'roles', {
        options: invert(CouponsPlus?.userRoles)
    }, undefined, {
        inclusionType: !scope.startsWith('tier'),
    })
};
export const UserRoleRenderer: CardRenderer<UserRoleOptions> = {
    type,
    icon: UserRoleMeta.icon!,
    prefix: '*',
    example: __('Gold Members, Silver Members, exclude Subscribers, etc.'),
    AboveComputedValue: usingTestableOptions<UserRoleOptions>(({inclusionType}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }

        if (inclusionType === 'allowed') {
            return __('Eligible User Roles')
        } else {
            return __('Ineligible User Roles')
        }
    }),
    ComputedValue: usingTestableOptions<UserRoleOptions>(({roles}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('condition', UserRoleMeta.id).name
        }
        if (!roles || roles.length === 0) {
            return <span className="opacity-60">{__('Select a role')}</span>
        }
        const metaData = CouponsPlus.components.conditions[UserRoleMeta.id]

        return <div className="grid grid-cols-1 gap-0">
            {roles.map(role => {
                return <div className="text-base leading-[18px]">
                    {CouponsPlus?.userRoles[role] || role}
                </div>;
            })}
        </div>;
    }),
}