import React, {FC} from "react";
import classNames from "classnames";
import {Handle as ReactFlowHandle, HandleType, Position} from "@xyflow/react";
import {ColorOptionWithCustomTint, request} from "./Color";

export type HandleProps = ColorOptionWithCustomTint & {
    position: Position,
    type: HandleType,
    id?: string,
    className?: string,
    x?: number,
    y?: number,
    bringToFront?: boolean,
    centerExtraAnchor?: boolean,
    invisible?: boolean,
}

export const Handle: FC<HandleProps> = ({id, type, position, color, className, x, y, bringToFront, invisible = false, ...props}) => {

    return <ReactFlowHandle id={id} type={type} position={position}
                            className={classNames(`relative bg-transparent border-none ${request(color).text(90)} flex items-center`, {
                                'min-w-[0px] max-w-[0px] min-h-[0px] max-h-[0px]': true,
                                'z-10': bringToFront,
                                [className || 'default-classname']: !!className
                            })} style={{
        left: typeof x === 'number' ? x : undefined,
    }}>
        {!invisible && position === Position.Left &&
            <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg"
                 className={'absolute min-w-3 min-h-3 -translate-x-2/3'}>
                <path
                    d="M6 12C4.4087 12 2.88258 11.3679 1.75736 10.2426C0.63214 9.11742 -8.75339e-07 7.5913 -7.86805e-07 6C-6.98271e-07 4.4087 0.63214 2.88258 1.75736 1.75736C2.88258 0.63214 4.4087 -7.55199e-07 6 -7.86805e-07L6 6L6 12Z"
                    fill="currentColor"/>
            </svg>}
        {!invisible && position === Position.Right &&
            <svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg"
                 className={'absolute min-w-3 min-h-3 -translate-x-1/3'}>
                <path
                    d="M1.57361e-06 12C1.5913 12 3.11742 11.3679 4.24264 10.2426C5.36786 9.11742 6 7.5913 6 6C6 4.4087 5.36786 2.88258 4.24264 1.75736C3.11742 0.63214 1.5913 -7.55199e-07 9.05975e-07 -7.86805e-07L7.86805e-07 6L1.57361e-06 12Z"
                    fill="currentColor"/>
            </svg>}
        {!invisible && position === Position.Top &&
            <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg"
                 className={'cp-top absolute min-w-3 min-h-3 rotate-180 -translate-x-1/2 translate-y-[-3px]'}>
                <path
                    d="M7.86805e-07 1.57361e-06C9.95479e-07 1.5913 0.632142 3.11742 1.75736 4.24264C2.88258 5.36786 4.4087 6 6 6C7.5913 6 9.11742 5.36786 10.2426 4.24264C11.3679 3.11742 12 1.5913 12 9.05975e-07L6 7.86805e-07L7.86805e-07 1.57361e-06Z"
                    fill="currentColor"/>
            </svg>}

        {!invisible && position === Position.Bottom &&
            <svg width="12" height="6" viewBox="0 0 12 6" fill="none" xmlns="http://www.w3.org/2000/svg"
                 className={'cp-bottom absolute min-w-3 min-h-3 -translate-x-1/2 -translate-y-px'}>
                <path
                    d="M7.86805e-07 1.57361e-06C9.95479e-07 1.5913 0.632142 3.11742 1.75736 4.24264C2.88258 5.36786 4.4087 6 6 6C7.5913 6 9.11742 5.36786 10.2426 4.24264C11.3679 3.11742 12 1.5913 12 9.05975e-07L6 7.86805e-07L7.86805e-07 1.57361e-06Z"
                    fill="currentColor"/>
            </svg>}

    </ReactFlowHandle>
}