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 {OfferCardContent} from "./OfferCardContent";
import {renderCurrencyValue} from "../fields/helpers";
import {RowOptions} from "./Fields/RowOptions";
import {ComponentCategory} from "../components";
import type {ComponentMeta} from "../ComponentsMeta";


export type PricePerItemOptions = {
    amount: number
}

export const type = 'PricePerItem'
export const PricePerItemMeta: ComponentMeta = {
    id: type,
    type: 'offers',
    category: ComponentCategory.CartItemDiscounts,
    priority: 3,
    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="M10.464 8.746c.227-.18.497-.311.786-.394v2.795a2.252 2.252 0 0 1-.786-.393c-.394-.313-.546-.681-.546-1.004 0-.323.152-.691.546-1.004ZM12.75 15.662v-2.824c.347.085.664.228.921.421.427.32.579.686.579.991 0 .305-.152.671-.579.991a2.534 2.534 0 0 1-.921.42Z"/>
                <path fillRule="evenodd"
                      d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 6a.75.75 0 0 0-1.5 0v.816a3.836 3.836 0 0 0-1.72.756c-.712.566-1.112 1.35-1.112 2.178 0 .829.4 1.612 1.113 2.178.502.4 1.102.647 1.719.756v2.978a2.536 2.536 0 0 1-.921-.421l-.879-.66a.75.75 0 0 0-.9 1.2l.879.66c.533.4 1.169.645 1.821.75V18a.75.75 0 0 0 1.5 0v-.81a4.124 4.124 0 0 0 1.821-.749c.745-.559 1.179-1.344 1.179-2.191 0-.847-.434-1.632-1.179-2.191a4.122 4.122 0 0 0-1.821-.75V8.354c.29.082.559.213.786.393l.415.33a.75.75 0 0 0 .933-1.175l-.415-.33a3.836 3.836 0 0 0-1.719-.755V6Z"
                      clipRule="evenodd"/>
            </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="M12 6v12m-3-2.818.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
        </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 PricePerItemRenderer: CardRenderer = {
    type: type,
    prefix: "*",
    example: __('All clearance t-shirts $10 each, 2 hoodies for $30/each, 3 for $25/each, etc.'),
    icon: PricePerItemMeta.icon!,
    AboveComputedValue: () => false,
    ComputedValue: usingOfferOptions<PricePerItemOptions>(({amount}, {color}, offer) => {
        return <OfferCardContent color={color} offer={offer}>
            {true && <div className="font-semibold flex items-center space-x-1">
                {<div>{renderCurrencyValue(amount)}</div>}
            </div>}
        </OfferCardContent>
    }),
}