import React, {FC, ReactNode} from "react";
import {renderCurrencyValue} from "../fields/helpers";
import {ProductDiscountOptions} from "./BuyXGetX";
import classNames from "classnames";
import {__} from "../../globals";

export type DiscountValueProps = {
    productDiscountOptions: ProductDiscountOptions,
    size?: 'normal' | 'small'
}

export const DiscountValue: FC<DiscountValueProps> = ({productDiscountOptions, size = 'normal'}) => {
    const renderOfferMainValue = (value: string | number, type?: 'normal' | 'number' | 'percentage' | 'amount' | 'fixed-price') => {
        let off = <span
            className={'opacity-60'}>OFF</span>;
        return <div
            className={classNames("flex items-center font-semibold subpixel-antialiased leading-5 whitespace-nowrap", {
                'text-3x': size === 'normal',
                'text-1x': size === 'small',
                'tracking-tighter': (['number', 'percentage'] as typeof type[]).includes(type),
            })}>
            {type === 'amount' && <div className="font-semibold flex items-center space-x-1">
                {<div>{renderCurrencyValue(value)}</div>} {off}
            </div>}
            {type === 'fixed-price' && <div className="font-semibold flex items-center space-x-1">
                <span className={'opacity-60 font-normal'}>For</span>{
                <div>{renderCurrencyValue(value)}</div>}{productDiscountOptions.quantity > 1 &&
                <span className={classNames('opacity-60 font-normal', {
                    'text-base': size === 'normal',
                    'text-smaller-1': size === 'small',
                })}>each</span>}
            </div>}
            {!['amount', 'fixed-price'].includes(productDiscountOptions.discount.type) && value}
            {type === 'percentage' && <span className="font-medium antialiased tracking-normal">% {off}</span>}
        </div>;
    }
    if (productDiscountOptions.discount.type === 'free') {
        return renderOfferMainValue('FREE', 'normal');
    }
    if (productDiscountOptions.discount.type === 'percentage') {
        return renderOfferMainValue(productDiscountOptions.discount.amount, 'percentage');
    }
    if (productDiscountOptions.discount.type === 'amount') {
        return renderOfferMainValue(productDiscountOptions.discount.amount, 'amount');
    }
    if (productDiscountOptions.discount.type === 'fixed-price') {
        return renderOfferMainValue(productDiscountOptions.discount.amount, 'fixed-price');
    }
    // amount or fixed-price
    return <span className="font-semibold">{productDiscountOptions.discount.amount}</span>;
}

export type DiscountValueRendererProps = {
    productDiscountOptions: ProductDiscountOptions,
//    size?: 'normal' | 'small'
}

export const DiscountQuantity: FC<DiscountValueProps> = ({productDiscountOptions: {quantity, qty, qtyType}}): ReactNode => {
    let value: ReactNode

    if (qtyType === 'simple') {
        value = quantity;
    } else {
        // advanced currently only supports 'anu'
        value = <div className="flex items-center uppercase gap-1">
            <span className="">{__('unlimited *').replace('*', '')}</span>
            <span className="opacity-60">{__('qty')}</span>
        </div>
    }

    return <div className={'font-semibold'}>{value}</div>
}