import React, {FC, ReactNode, useCallback} from "react";
import {ColorOption, ColorOptionWithCustomTint, groupHover, hover, request, useColor} from "./Color";
import classNames from "classnames";
import {CouponsPlus} from "../globals";
import {LegacyTestableGroupMode} from "./testableGroupTypes";

export type ActionType = LegacyTestableGroupMode | string

export type RightContextButtonProps = ColorOptionWithCustomTint & {
    type: ActionType,
    label: string | ((buttonIsHovered: boolean) => ReactNode),
    onClick: () => void,
    onRightButtonHoverStart?: (type: ActionType) => void,
    onRightButtonHoverEnd?: (type: ActionType) => void,
    thickness?: number,
    bringButtonToFrontOnHover?: boolean,
    uppercased?: boolean,
    labelSize?: string,
    direction?: 'horizontal' | 'vertical',
    scope?: 'offer' | 'testables' // default is testables,,
}

export const RightContextButton: FC<RightContextButtonProps> = ({
                                                                    type,
                                                                    color,
                                                                    label,
                                                                    onClick,
                                                                    onRightButtonHoverStart,
                                                                    onRightButtonHoverEnd,
                                                                    thickness,
                                                                    bringButtonToFrontOnHover = true,
                                                                    uppercased = true,
                                                                    labelSize,
                                                                    direction = 'horizontal',
                                                                    scope = 'testables',

                                                                }) => {
    const [buttonIsHovered, setButtonIsHovered] = React.useState(false)

    /*
        if (scope === 'testables' && !CouponsPlus.implementations.engine.testableComposite) {
            return null
        }
    */

    const handleClick = useCallback((e) => {
        e.stopPropagation()
        onClick()
    }, [onClick])

    const renderedLabel = typeof label === 'function' ? label(buttonIsHovered) : label

    return <div className={classNames("flex items-center", {
        'flex-col': direction === 'vertical',
        'flex-row': direction === 'horizontal',
    })} onClick={handleClick}>
        <svg width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={
            classNames(`${request(color, 'anchor').text(20)}`, {
                'rotate-90': direction === 'vertical',
            })
        }>
            <path
                d="M2.09815e-06 2.95642e-06C2.12173 3.23465e-06 4.15656 0.842858 5.65686 2.34315C7.15715 3.84344 8 5.87827 8 8C8 10.1217 7.15715 12.1566 5.65685 13.6569C4.15656 15.1571 2.12173 16 9.53674e-07 16L1.04907e-06 8L2.09815e-06 2.95642e-06Z"
                fill="currentColor"/>
        </svg>
        <div className={classNames(`relative z-10 ${request(color, 'line').background(20)}`, {
            'w-4': direction === 'horizontal',
            'h-5 -mt-1': direction === 'vertical',
        })} style={{
            [direction === 'horizontal' ? 'height' : 'width']: thickness || 1,
        }}></div>
        <button
            className={classNames(`relative  group flex items-center  rounded-3 space-x-1 ${request(color, 'button.label.background').background(10)} ${request(color, 'hover:button.background').background(hover(80))} transition
                        `, {
                'px-1 py-[2px]': renderedLabel,
                'p-[2px]': !renderedLabel,
                'relative z-20': (buttonIsHovered && bringButtonToFrontOnHover) || !renderedLabel,
                '-translate-x-1': direction === 'horizontal',
            })}
            onClick={onClick}
            onMouseEnter={() => {
                setButtonIsHovered(true)
                onRightButtonHoverStart?.bind(null, type)
            }}
            onMouseLeave={() => {
                setButtonIsHovered(false)
                onRightButtonHoverEnd?.bind(null, type)
            }}
        >
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={
                `${request(color).text(80)} ${request(color, 'group-hover:anchor').text(80)}`
            }>
                <rect y="1.90735e-06" width="12" height="12" rx="6" fill="currentColor"/>
                <path d="M6 3V9M9 6H3" stroke="#EEEEF9" stroke-width="1.5" stroke-linecap="round"
                      stroke-linejoin="round"/>
            </svg>
            {renderedLabel && <span
                className={classNames(` font-medium transition whitespace-nowrap ${request(color, 'button.label').text(70)} ${request(color,).text(groupHover(10))}`, {
                    'uppercase': uppercased,
                    'text-smaller-3': !labelSize,
                    [labelSize || 'default-label-size']: labelSize,
                })}>
                        {renderedLabel}
                    </span>
            }        </button>
    </div>;
}