import {__} from "../globals";
import { createContext, type ReactNode } from "react";
import { ComponentCategory, type ComponentRuntimeData } from "./components";
import type { QuantityOptions } from "./cards/Quantity";

type PopupScreen = Partial<{
    title: string;
    description: string;
}>;

type SuggestedComponentOrCategory = {
    type: 'category',
    id: ComponentCategory 
} | {
    type: 'component',
    id: string
}
export type SuggestedScope = {
    id: string,
    label: string,
    examples: string[],
    description?: string,
    screens?: Partial<{
        productsSelection: PopupScreen,
        quantity: PopupScreen & {
            mustHaveQuantity?: boolean
        }
    }>,
    actions?: Partial<{
        addOffer: Partial<{
            buttonLabel: string,
            buttonDescription: (filteredItemsLabel: ReactNode) => ReactNode,
            suggestedArrowLabel: string
        }>
    }>,
    defaultOptions?: (componentRuntimeData: ComponentRuntimeData) => typeof componentRuntimeData['options'],
    suggests?: SuggestedComponentOrCategory
}
const whatProductsToDiscountTitle = __('What Kind of Products to Discount?');
const whatProductsToDiscountDescription = __('These are the products that will be discounted.');

const addDiscountArrowLabel = __('Add Discount Offer')
export const suggestedScopes: SuggestedScope[] = [
    {
        id: 'bogo',
        label: 'Buy One, Get One',
        description: __('Bogo offers on the same product or across different products, categories, brands, tags, attributes and more.'),
        examples: [
            __('Buy 1 of Product A, get another for free'),
            __('Buy 1 in Category, get another for free'),
            __('Buy 1 Product A, get Product B'),
            __('Buy 1 Category A, get Category B'),
        ], 
        screens: {
            productsSelection: {
                title: __('What Kind of Products Must the Customer Buy?'),
                description: __('The products that the customer must buy to be eligible for the offer. These products will not be discounted but will be used to trigger offer. These represent the "buy" part of the "Buy One Get One" offer.')
            },
            quantity: {
                title: __('How many items must the customer buy?'),
                description: __('These are the number of items the customer must buy for the bogo offer to apply.'),
                mustHaveQuantity: true
            }
        },
        actions: {
            addOffer: {
                suggestedArrowLabel: __('Add BOGO Offer'),
                buttonDescription(filteredItemsLabel) {
                    return <>
                                {__('Add a BOGO offer that uses the *').replace('*', '')}
                                {filteredItemsLabel}
                                {__('as the "buy" items')}
                            </>
                },
            }
        },
        suggests: {
            type: 'category',
            id: ComponentCategory.BOGO
        }
    },
    {
        id: 'item_discounts',
        label: 'Item Discounts',
        examples: [
            __('10% off Product A'),
            __('$5 off Categories A, B, C'),
            __('12% off Categories A or B. Min. qty 2+'),

        ],
        screens: {
            productsSelection: {
                title: whatProductsToDiscountTitle,
                description: whatProductsToDiscountDescription
            }
        },
        actions: {
            addOffer: {
                suggestedArrowLabel: addDiscountArrowLabel,
                buttonDescription(filteredItemsLabel) {
                    return <>
                                {__('Add a Discount offer that applies discounts to the *').replace('*', '')}
                                {filteredItemsLabel}
                            </>
                },
            }
        },
        suggests: {
            type: 'category', // a full category because this can apply to Discount and Price Per Item
            id: ComponentCategory.CartItemDiscounts 
        }
    },
    {
        id: 'cart_discounts',
        label: 'Cart Discounts',
        examples: [
            __('10% storewide discount'),
            __('$20 off when buying Product A'),
        ],
        screens: {
            productsSelection: {
                title: __('What Kind of Products Must the Customer Buy to Qualify for the Cart Discount?'/*'Does the customer need to have specific products in their cart to be eligible for the discount?'*/)
            }
        },
        actions: {
            addOffer: {
                suggestedArrowLabel: addDiscountArrowLabel,
                buttonDescription(filteredItemsLabel) {
                    return <>
                                {__('Add a Discount offer that uses the *').replace('*', '')}
                                {filteredItemsLabel}
                                {__('as a condition for the cart discount')}
                            </>
                },
            }
        },
        suggests: {
            type: 'component',
            id: 'Discount'
        }
    },
    {
        id: 'min_bulk_discount',
        label: 'Min. Quantity Bulk Discount',
        description: __('Apply a discount when buying X or more, like 10% when buying 5 or more.'),
        examples: [],
        screens: {
            productsSelection: {
                title: whatProductsToDiscountTitle,
                description: __('These are the products that will be discounted when the customer meets the min. required quantity')
            },
            quantity: {
                title: __('Minimum Purchase Quantity'),
                mustHaveQuantity: true
            }
        },
        actions: {
            addOffer: {
                suggestedArrowLabel: __('Add Discount offer'),
                buttonLabel: __('Add Offer'),
                buttonDescription(filteredItemsLabel) {
                    return <>
                        { __('Add a Discount to the *').replace('*', '') }
                        { filteredItemsLabel }
                        {__('When the min. required amount is in the cart')}
                    </>
                },
            }
        },
        defaultOptions(componentRuntimeData) {
            if (componentRuntimeData.type === 'NumberOfItems') {
                const options = { ...componentRuntimeData.options } as QuantityOptions

                options.quantity.type = 'minimum'

                return options
            }

            return componentRuntimeData.options
        },
        suggests: {
            type: 'category', // a full category because this can apply to Discount and Price Per Item
            id: ComponentCategory.CartItemDiscounts 
        }
    },

    {
        id: '',
        label: 'Not Sure / Other',
        examples: [
            __('Other offers not listed above'),
        ]
    }
    /*{
        id: 'or_inclusive',
        label: 'Advanced Selection of Products',
        examples: [
            __('Any 1 of Product A, B, C AND/OR Category X, Y, Z'),
        ]
    },
    {
        id: 'and',
        label: 'Mix and Match Pairing (Combos / Bundles)',
        examples: [
            __('1 of Product A + 1 of Product B'),
            __('2 in Category A + 1 of Product B'),
        ]
    },*/
]

export const getSuggestedScopeById = (id?: string) => {
    return suggestedScopes.find(scope => scope.id === id);
}

export const SuggestedScopeContext = createContext<typeof suggestedScopes[number]['id'] | string>('')