import {ComponentMeta} from "../ComponentsMeta";
import React from "react";
import {iconWithClassName} from "../IconWithClassName";
import {CardRenderer} from "../CardRenderers";
import {__} from "../../globals";
import {usingOfferOptions} from "./CardHelpers";
import {FieldType} from "../fields";
import {NumberProps} from "../fields/Number";
import {renderCurrencyValue} from "../fields/helpers";
import {OfferCardContent} from "./OfferCardContent";
import {BaseOfferOptions} from "./OfferTypes";
import {RepeatingLabel} from "./Recusrive";
import {RowOptions} from "./Fields/RowOptions";
import {ComponentCategory} from "../components";


export type BundlePriceOptions = BaseOfferOptions & {
    amount: number
}

export const type = 'BundlePrice'
export const BundlePriceMeta: ComponentMeta = {
    id: type,
    type: 'offers',
    category: ComponentCategory.CartItemDiscounts,
    priority: 2,
    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
                    d="M5.566 4.657A4.505 4.505 0 0 1 6.75 4.5h10.5c.41 0 .806.055 1.183.157A3 3 0 0 0 15.75 3h-7.5a3 3 0 0 0-2.684 1.657ZM2.25 12a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3v6a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3v-6ZM5.25 7.5c-.41 0-.806.055-1.184.157A3 3 0 0 1 6.75 6h10.5a3 3 0 0 1 2.683 1.657A4.505 4.505 0 0 0 18.75 7.5H5.25Z"/>
            </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="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"/>
        </svg>
    }),
    fieldsMap: [
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto'
            }),
            {
                id: 'amount',
                renderType: FieldType.Number,
                fieldProps: {
                    hasAmountStructure: false,
                    type: 'currency',
                    border: false
                } as Partial<NumberProps>
            }
        ]
    ]
}

export const BundlePriceRenderer: CardRenderer = {
    type: type,
    prefix: "*",
    example: __('2 hoodies for $50, 1 burger + 1 fries + 1 drink for $20, etc.'),
    icon: BundlePriceMeta.icon!,
    AboveComputedValue: () => false,
    ComputedValue: usingOfferOptions<BundlePriceOptions>(({amount}, {color}, offer) => {
        return <OfferCardContent color={color} offer={offer} title={__('Bundle Price')}>
            {true && <div className="font-semibold flex items-center space-x-1">
                {<div>{renderCurrencyValue(amount)}</div>}
            </div>}
        </OfferCardContent>
    }),
    OutsideComputedValue: usingOfferOptions<BundlePriceOptions>(({__BASE__: {isRecursive}}, {color,}) => {
        return <ul className={`max-w-[160px] text-smaller-1 leading-3 text-gray-600
         px-2 py-1`}>
            {isRecursive && <RepeatingLabel /> }
        </ul>
    })
}