import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {iconWithClassName} from "../../IconWithClassName"
import {CardRenderer} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {ComponentCategory} from "../../components";
import {FieldType} from "../../fields";
import {MultiSelectSearchProps} from "../../fields/MultiSelectSearch";
import {NumberProps} from "../../fields/Number";
import {RowOptions} from "../Fields/RowOptions";

export type NewAccountOptions = {
    value: number,
    unit: 'hours' | 'days',
    allowGuests: boolean
}

const type = CouponsPlus?.components?.conditions?.NewAccount?.type || 'NewAccount'

export const NewAccountMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    category: ComponentCategory.Account,
    priority: 3,
    fieldsTitlePrefix: 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="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v6c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-3.75V6Z"
                      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="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
        </svg>
    }),
    // @ts-ignore
    fieldsMap: ({options: {type}}: Partial<{ options: NewAccountOptions }>) => [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto',
                direction: "vertical"
            }),
            {
                id: 'value',
                renderType: FieldType.Number,
                fieldProps: {hasAmountStructure: false, border: false} as NumberProps
            },
            {
                id: 'unit',
                renderType: FieldType.Select,
                fieldOptions: {/*optionsKey: '_allowed',*/ centered: true},
                fieldProps: {size: 'small', style: 'gray', width: 'auto'} as MultiSelectSearchProps<any>,
            },
        ],
        [
            [{
                id: 'allowGuests',
                renderType: FieldType.BooleanTab,
            }]
        ],
    ]
}

export const NewAccountRenderer: CardRenderer<NewAccountOptions> = {
    type,
    icon: NewAccountMeta.icon!,
    prefix: '*',
    example: __("Registered within 24 hours, within 7 days, etc."),
    ComputedValue: usingTestableOptions<NewAccountOptions>(({value, unit, allowGuests}, {context}) => {
        let allowGuestsText = '';

        switch (unit) {
            case 'hours':
                allowGuestsText = __('Within * hours').replace('*', value);
                break;
            case 'days':
                allowGuestsText = __('Within * days').replace('*', value);
                break;
        }

        if (allowGuests) {
            allowGuestsText += ` ${__('(including guests)')}`;
        } else {
            allowGuestsText += ` ${__('(excluding guests)')}`;
        }

        return allowGuestsText;
    }),
}