import {FC, MouseEvent as ReactMouseEvent} from "react";
import {__} from "../globals";
import {useHover} from "./hooks";
import classNames from "classnames";
import {EmulatedButton} from "./EmulatedButton";

export interface RemoveButtonProps {
    entityID: string,
    onClick: (event: ReactMouseEvent<HTMLButtonElement>) => void,
    onRequestToHighlight?: () => void,
    onRequestToUnHighlight?: () => void,
    show?: boolean,
    positionX?: 'right-corner' | 'right' | 'right-inset',
    positionY?: 'top' | 'top-inset',
    showLabel?: boolean
}

export const RemoveButton: FC<RemoveButtonProps> = ({onClick, entityID, onRequestToHighlight, onRequestToUnHighlight, show, positionX = 'right-corner', positionY = 'top', showLabel = true}) => {
    const ref = useHover<HTMLButtonElement>({onMouseEnter: onRequestToHighlight, onMouseLeave: onRequestToUnHighlight})

    return <EmulatedButton ref={ref}
                   className={classNames('absolute inline-flex items-center flex-shrink-0 justify-center space-x-1 group py-2 px-2 transition-all duration-500', {
                        'top-0 -translate-y-full': positionY === 'top',
                        'top-0': positionY === 'top-inset',
                        '-right-2': positionX === 'right-corner',
                        'right-0 -translate-x-full': positionX === 'right-inset',
                        'right-0 translate-x-full': positionX === 'right',
                        'opacity-0': !show,
                        'opacity-100': show
                    })}
                   onClick={onClick}
            >
                <div className="h-4 w-4 flex items-center justify-center rounded-full bg-gray-200 text-gray-500 group-hover:bg-gray-350 group-hover:text-gray-700 flex-1 transition-all duration-500">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-3 w-3">
                        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
                    </svg>
                </div>
        {showLabel && <span
            className="absolute left-6 text-smaller-2 group-hover:text-gray-600 flex-1 transition-all duration-500">{__('Remove')}</span>}
           </EmulatedButton>
}