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 {OfferCardContent} from "./OfferCardContent";
import {renderCurrencyValue} from "../fields/helpers";
import classNames from "classnames";
import context from "../../Context";
import {RowOptions} from "./Fields/RowOptions";


export type ShippingDiscountOptions = {
    type: 'percentage' | 'amount' | 'finalCost'
    amount: number
}

export const type = 'ShippingDiscount'
export const ShippingDiscountMeta: ComponentMeta = {
    id: type,
    type: 'offers',
    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="M3.375 4.5C2.339 4.5 1.5 5.34 1.5 6.375V13.5h12V6.375c0-1.036-.84-1.875-1.875-1.875h-8.25ZM13.5 15h-12v2.625c0 1.035.84 1.875 1.875 1.875h.375a3 3 0 1 1 6 0h3a.75.75 0 0 0 .75-.75V15Z"/>
                <path
                    d="M8.25 19.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0ZM15.75 6.75a.75.75 0 0 0-.75.75v11.25c0 .087.015.17.042.248a3 3 0 0 1 5.958.464c.853-.175 1.522-.935 1.464-1.883a18.659 18.659 0 0 0-3.732-10.104 1.837 1.837 0 0 0-1.47-.725H15.75Z"/>
                <path d="M19.5 19.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Z"/>
            </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="M8.25 18.75a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 0 1-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 0 0-3.213-9.193 2.056 2.056 0 0 0-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 0 0-10.026 0 1.106 1.106 0 0 0-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12"/>
        </svg>
    }),
    fieldsMap: ({options: {type}}) => [
        [
            {
                id: 'type',
                renderType: FieldType.Tab,
            }
            /*
                        {
                            id: 'type',
                            renderType: FieldType.Select,
                            fieldOptions: {/!*optionsKey: '_allowed',*!/ centered: true},
                            fieldProps: {size: 'small', style: 'gray', width: 'auto'} as MultiSelectSearchProps<any>,
                        }
            */
        ],
        [
            new RowOptions({
                type: 'featured',
                colWidth: 'auto'
            }),
            {
                id: 'amount',
                renderType: FieldType.Number,
                fieldProps: {
                    hasAmountStructure: false,
                    type: type === 'percentage' ? 'percentage' : 'currency',
                    border: false
                } as Partial<NumberProps>
            }
        ]
    ]
}

export const ShippingDiscountRenderer: CardRenderer = {
    type: type,
    prefix: "*",
    example: __('50% off, $5 off, $10 shipping'),
    icon: ShippingDiscountMeta.icon!,
    AboveComputedValue: () => false,
    ComputedValue: usingOfferOptions<ShippingDiscountOptions>(({amount, type}, {color}, offer) => {
        const renderOfferMainValue = (value: string | number, type?: 'normal' | 'number' | 'percentage' | 'amount' | 'fixed-price') => {
            let off = <span
                className={'opacity-60 tracking-normal'}>OFF</span>;
            return <div
                className={classNames("flex items-center text-3x font-semibold subpixel-antialiased leading-5 whitespace-nowrap", {
                    '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 tracking-normal">
                    <span className={'opacity-60 font-normal'}>For</span>{
                    <div>{renderCurrencyValue(value)}</div>}
                </div>}
                {
                    //@ts-ignore
                    !(['amount' as const, 'fixed-price' as const]).includes(type!) && value
                }
                {type === 'percentage' && <span className="font-medium antialiased tracking-normal">% {off}</span>}
            </div>;
        }
        const renderDiscountValue = () => {
            if (type === 'percentage') {
                return renderOfferMainValue(amount, 'percentage');
            }
            if (type === 'amount') {
                return renderOfferMainValue(amount, 'amount');
            }
            if (type === 'finalCost') {
                return renderOfferMainValue(amount, 'fixed-price');
            }
            // amount or fixed-price
            return <span className="font-semibold">{amount}</span>;
        }

        return <OfferCardContent color={color} offer={offer}>
            {true && <div className="font-semibold flex items-center space-x-1">
                {<div>{renderDiscountValue()}</div>}
            </div>}
        </OfferCardContent>
    }),
}