import React, {FC} from "react";
import {TestableComposite} from "./tree/TestableComposite";
import {colors} from "./tree/Colors";
import {Handle} from "./tree/Handle";
import {NodeProps, Position} from "@xyflow/react";
import {SelectActionButton} from "./SelectActionButton";
import {RenderedNodeDataInBranch} from "./tree/store";
import {motion} from 'motion/react';
import {NodeWithAnchors} from "./NodeWithAnchors";
import {getNodesFinder} from "./tree/NodesFinder";
import {StateBranchNode} from "./tree/StateBranchNode";
import classNames from "classnames";

export type SelectActionNodeData = RenderedNodeDataInBranch & {
    renderedNodeType: 'action',
}

export const SelectActionBranch: FC<{ data: SelectActionNodeData } & NodeProps> = ({id}) => {
    const color = colors.blue;
    const nodesFinder = getNodesFinder()
    const branch = nodesFinder.get<StateBranchNode>(id);


    if (!branch) {
        return null;
    }

    const isInsideBranch = branch.isInsideAnotherBranch()
    const selectActionButton = <SelectActionButton branchID={id}/>;

    return <motion.div layout={true} transition={{type: 'spring'}} className={classNames({
        'flex relative items-center': isInsideBranch
    })}>
        {!isInsideBranch ?
            <>
                <Handle type={
                    // we know for sure this is always a target
                    'target'
                }
                        position={Position.Top}
                        color={colors.blue}
                />
                {selectActionButton}
            </> :
            <>
                <Handle
                    id={`left`}
                    type={'target'}
                    position={Position.Left}
                    color={color}
                />
                {selectActionButton}
            </>}
    </motion.div>
}