import React, {FC} from "react";
import {Position} from "@xyflow/system";
import {Handle, NodeProps} from "@xyflow/react";
import {useStoreAPI} from "./tree/TreeHooks";
import {getGroveForReading} from "./tree/Grove";
import {TreeNode} from "./tree/TreeNode";
import {RenderedNodeData} from "./tree/FlowDataCreator";

export type BranchAddNodeButtonNodeData = {
    renderedNodeType: 'step-anchor',
    lastAnchor: string, // this is calculated after the node is created using regexes so that it is only done once per creation and not on every render
}
export const BranchAddNodeButtonNodeBranch: FC<NodeProps & RenderedNodeData> = ({id, data}) => {
    const cloneTier = useStoreAPI('cloneTier')

    return <div className={'relative'}>
        <Handle id={'top'} type='target' position={Position.Top} className={'invisible top-[2px]'} />
        <button className={'relative flex items-center justify-center w-[14px] h-[14px] rounded-full bg-gray-300 text-gray-100 font-bold text-smaller-1 uppercase'} onClick={() => {
            const grove = getGroveForReading()
            const treeNode = grove.get<TreeNode>(data.treeNodeId);

            if (!treeNode) {
                console.error('BranchAddNodeButtonNodeBranch: treeNode not found', data.treeNodeId);
                return;
            }

            cloneTier(treeNode.branchNode.getLastChildId())
        }}>
            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" className="min-w-[14px] min-h-[14px}">
                <path d="M4 1V7M7 4H1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </button>
    </div>
}