import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {FieldType} from "../../fields"
import {iconWithClassName} from "../../IconWithClassName"
import {AmountValidatorOptions} from "../filterinterfaces"
import {CardRenderer, CardRendererContext} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {getCardComponentData} from "../../cards"
import {ComponentCategory} from "../../components";
import {RowOptions} from "../Fields/RowOptions";
import {NumberProps} from "../../fields/Number";
import React from "react";

export type CouponUsageNumberOfTimesPerUserOptions = AmountValidatorOptions

const type = CouponsPlus?.components?.conditions?.CouponUsageNumberOfTimesPerUser?.type || 'CouponUsageNumberOfTimesPerUser'
export const CouponUsageNumberOfTimesPerUserMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Coupon,
    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 d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 0 1 3.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0 1 21 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 0 1 7.5 16.125V3.375Z" />
              <path d="M15 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 17.25 7.5h-1.875A.375.375 0 0 1 15 7.125V5.25ZM4.875 6H6v10.125A3.375 3.375 0 0 0 9.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 0 1 3 20.625V7.875C3 6.839 3.84 6 4.875 6Z" />
            </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.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
</svg>

    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto',
                direction: "vertical",
                gap: 12
            }),
            {id: 'quantity', renderType: FieldType.Number, fieldProps: {border: false, labels: {top: 'Maximum', input: {inputRightOutside: <span
                                className="inline-flex pl-1 text-gray-300 text-3x !font-normal ">{__('Per user')}</span>
                        }}, showSingleOption: false} as NumberProps},
            /*{
                id: 'interval',
                renderType: FieldType.Select,
                fieldOptions: {optionsKey: '_allowed', centered: true},
                fieldProps: {size: 'small', style: 'gray', width: 'auto'} as MultiSelectSearchProps<any>,
            }*/
        ],
    ]
}
export const CouponUsageNumberOfTimesPerUserRenderer: CardRenderer<CouponUsageNumberOfTimesPerUserOptions> = {
    type,
    icon: CouponUsageNumberOfTimesPerUserMeta.icon!,
    prefix: '[Total] *',
    example: __('1 per user, 3 per user, 10 per user, etc.'),
    AboveComputedValue: usingTestableOptions<CouponUsageNumberOfTimesPerUserOptions>(({quantity: {type}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }


        return undefined
    }),
    ComputedValue: usingTestableOptions<CouponUsageNumberOfTimesPerUserOptions>(({quantity: {amount}}, {context}) => {
        if (context === 'tier-base') {
            return getCardComponentData('condition', type).name
        }

        return <div className="flex flex-row items-center gap-2">
            <div className="flex items-center gap-1">
                <span>{amount}</span> <span className={"opacity-80"}>{__('per user')}</span>
            </div>
        </div>;
    }),
}