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 {MultiSelectSearchProps} from "../../fields/MultiSelectSearch";
import {findKey} from "lodash";
import {ComponentCategory} from "../../components";
import {RowOptions} from "../Fields/RowOptions";
import {NumberProps} from "../../fields/Number";
import React from "react";
import {request} from "../../Color";

export type CouponUsageNumberOfTimesOptions = AmountValidatorOptions & {
    interval: 'alltime' | 'everyday' | 'everyweek' | 'everymonth' | 'everyyear'
}

const type = CouponsPlus?.components?.conditions?.CouponUsageNumberOfTimes?.type || 'CouponUsageNumberOfTimes'
export const CouponUsageNumberOfTimesMeta: 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 fillRule="evenodd" d="M1.5 6.375c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v3.026a.75.75 0 0 1-.375.65 2.249 2.249 0 0 0 0 3.898.75.75 0 0 1 .375.65v3.026c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 17.625v-3.026a.75.75 0 0 1 .374-.65 2.249 2.249 0 0 0 0-3.898.75.75 0 0 1-.374-.65V6.375Zm15-1.125a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0V6a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0v.75a.75.75 0 0 0 1.5 0v-.75Zm-.75 3a.75.75 0 0 1 .75.75v.75a.75.75 0 0 1-1.5 0v-.75a.75.75 0 0 1 .75-.75Zm.75 4.5a.75.75 0 0 0-1.5 0V18a.75.75 0 0 0 1.5 0v-.75ZM6 12a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 0 1.5H6.75A.75.75 0 0 1 6 12Zm.75 2.25a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5h-3Z" 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="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z" />
        </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 ">{__('Uses')}</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 CouponUsageNumberOfTimesRenderer: CardRenderer<CouponUsageNumberOfTimesOptions> = {
    type,
    icon: CouponUsageNumberOfTimesMeta.icon!,
    prefix: '[Total] *',
    example: __('100 all time, or 10 times per day, or 50 times per week, etc.'),
    AboveComputedValue: usingTestableOptions<CouponUsageNumberOfTimesOptions>(({quantity: {type}}, {context}) => {
        if ((['tier-base', 'tier-subchild'] as CardRendererContext[]).includes(context)) {
            return false
        }


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

        const metaData = CouponsPlus.components.conditions[CouponUsageNumberOfTimesMeta.id]
        const intervalLabel = findKey(metaData.fields.interval.meta._allowed, (value) => value === interval) as CouponUsageNumberOfTimesOptions['interval']

        return <div className="flex flex-row items-center gap-2">
            <div className="flex items-center gap-1">
                <span>{amount}</span> <span className={"opacity-80"}>{__('max.')}</span> <span className={"opacity-80"}>{__('globally')}</span>
            </div>
            {interval !== 'alltime' && <div className={`flex items-center gap-1 text-smaller-1 ${request(color,).text(90)}`}>
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="min-w-3 min-h-3 max-w-3 max-h-3">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
                </svg>
                <span className="">{intervalLabel}</span>
            </div>}
        </div>;
    }),
}