import classNames from "classnames";
import {NumberProps} from "./Number";
import {__} from "../../globals";
import React from "react";
import type {BuyXGetXOptions} from "../cards/BuyXGetX";

export const getNumberContainerClasses = ({border = true}: {border?: boolean} = {}) => classNames('inline-flex flex-col space-y-1 items-center --min-w-36 rounded-1 --bg-white bg-opacity-30', {
    'hover:ring-[4px] hover:ring-gray-150 hover:ring-opacity-40 hover:ring-offset-[1px] ---ring-offset-transparent border-gray-150 border-[2px] py-1 px-1': border === true
})

export const getBOGOOfferNumberInputProps: (discountType: BuyXGetXOptions['discount']['type']) => Pick<NumberProps, 'labels' | 'border' | 'type'> = (discountType) => {
    const eachLabel = <span className="inline-flex pl-1 text-gray-300 text-1x !font-normal">{__('/each')}</span>

    return ({
        labels: {
            input: {
                /*
                                            inputLeft: ['percentage', 'amount'].includes(discountType) ? '-' : undefined,
                */
                inputRight: ['percentage', 'amount'].includes(discountType) ?
                    <>
                                        <span
                                            className="inline-flex pl-1 text-gray-300">OFF</span>
                        {discountType === 'amount' && eachLabel}
                    </> : (['fixed-price'].includes(discountType) ? eachLabel : undefined),
                inputLeft: ['fixed-price'].includes(discountType) ?
                    <span
                        className="inline-flex pl-1 text-gray-300 mr-1 !font-medium">{__('for')}</span> : undefined,
            }
        },
        type: ({
            free: 'free',
            percentage: 'percentage',
            amount: 'currency',
            'fixed-price': 'currency',
        }[discountType]),
        border: false,
        hasAmountStructure: true,
    })
}