import React, {FC, PropsWithChildren} from "react";
import {Handle} from "@xyflow/react";
import {Position} from "@xyflow/system";
import {StepAnchorData} from "./StepAnchorBranch";
import classNames from "classnames";

export type StepAnchorHandlesProps = Pick<StepAnchorData, 'isFirst'> & {
    handles?: {
        left?: boolean,
        top?: boolean,
        right?: boolean,
        bottom?: boolean,
    }
}

export const StepAnchorHandles: FC<StepAnchorHandlesProps & PropsWithChildren> = ({children, isFirst, handles}) => {
    return <>
        {isFirst ? <Handle id={`left`} type={'target'} position={Position.Left} className={handles?.left === false ? 'invisible' : 'invisible'}/>
            : <Handle id={`top`} type={'target'} position={Position.Top} className={'invisible top-1'}/>}
        <Handle id={`right`} type={'source'} position={Position.Right} className={handles?.right === false ? 'invisible' : 'invisible'} />
        {children}
        <Handle id={`bottom`} type={'source'} position={Position.Bottom} className={classNames('--translate-x-[0.1px] -top-1 ', {
            'invisible': true,
        })}/>
    </>;
}