import {__, CouponsPlus} from "../../../globals"
import {ComponentMeta} from "../../ComponentsMeta"
import {FieldType} from "../../fields"
import {iconWithClassName} from "../../IconWithClassName"
import {CardRenderer} from "../../CardRenderers";
import {usingTestableOptions} from "../CardHelpers"
import {ComponentCategory} from "../../components";
import {TabsProps} from "../../fields/tabs";
import parse from "html-react-parser";
import {request} from "../../Color";

export type NewCustomerOptions = {
    shouldHavePurchases: 'yes' | 'no',
    //strictness: 'strict' | 'loose',
    allowGuests: boolean
}

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

export const NewCustomerMeta: ComponentMeta = {
    id: type,
    type: 'conditions',
    fieldsTitlePrefix: false,
    category: ComponentCategory.Account,
    priority: 2,
    icon: iconWithClassName(({className, context}) => {
        if (context === 'card') {
            // solid
            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="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
            </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="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3" />
        </svg>
    }),
    fieldsMap: (condition) =>  [
        [
            {id: 'shouldHavePurchases', renderType: FieldType.Tab, fieldProps: {direction: 'vertical'} as TabsProps /*fieldProps: {} as NumberProps*/},
        ],
/*
        [
            {id: 'strictness', renderType: FieldType.Tab, /!*fieldProps: {} as NumberProps*!/ title: __('Strictness')},
        ],
*/
        [(condition.options.shouldHavePurchases == 'no'? {
            id: 'allowGuests',
            renderType: FieldType.BooleanTab,
        } : [])
]    ]
}
export const NewCustomerRenderer: CardRenderer<NewCustomerOptions> = {
    type,
    icon: NewCustomerMeta.icon!,
    prefix: '[Is]*',
    example: __('New customers with no order history or existing customers only'),
    AboveComputedValue: () => false,
    ComputedValue: usingTestableOptions<NewCustomerOptions>(({shouldHavePurchases, allowGuests}, {context, color}) => {

        let purchaseHistory = ''

        let restrictedToNewCustomers = shouldHavePurchases !== 'yes';

        if (restrictedToNewCustomers) {
            purchaseHistory = __('[New customers] with no previous purchases')
        } else {
            purchaseHistory = __('[Existing Customers] with previous purchases')
        }

        let strictnessLabel = ''
        /*if (strictness === 'strict') {
            strictnessLabel = __('Any history (zero-tolerance)')
        } else if (strictness === 'loose') {
            strictnessLabel = shouldHavePurchases === 'no' ? __('No completed orders') : __('Completed orders only')
        }*/

        if (restrictedToNewCustomers) {
            if (allowGuests) {
                strictnessLabel += __('Guests allowed')
            } else {
                strictnessLabel += __('Logged-in users only')
            }
        }

        return <div className="space-y-1">
            <p className="leading-4 text-base" style={{textWrap: 'initial'}}>{parse(purchaseHistory.replace(/\[(.*?)\]/g, `<span class="font-bold ${request(color).text(110)}">$1</span>`))}</p>
            <p className="text-smaller-1 opacity-80">{strictnessLabel}</p>
        </div>
    }),
}