certimate/ui/src/components/workflow/node/BranchNode.tsx

import { memo } from "react";
import { useTranslation } from "react-i18next";
import { Button, theme } from "antd";

import { type WorkflowNode } from "@/domain/workflow";
import { useZustandShallowSelector } from "@/hooks";
import { useWorkflowStore } from "@/stores/workflow";

import AddNode from "./AddNode";
import WorkflowElement from "../WorkflowElement";
import { type SharedNodeProps } from "./_SharedNode";

export type BrandNodeProps = SharedNodeProps;

const BranchNode = ({ node, disabled }: BrandNodeProps) => {
  const { t } = useTranslation();

  const { addBranch } = useWorkflowStore(useZustandShallowSelector(["addBranch"]));

  const { token: themeToken } = theme.useToken();

  const renderBranch = (node: WorkflowNode, branchNodeId?: string, branchIndex?: number) => {
    const elements: JSX.Element[] = [];

    let current = node as typeof node | undefined;
    while (current) {
      elements.push(<WorkflowElement key={current.id} node={current} disabled={disabled} branchId={branchNodeId} branchIndex={branchIndex} />);
      current = current.next;
    }

    return elements;
  };

  return (
    <>
      <div
        className="relative flex gap-x-16 before:absolute before:inset-x-[128px] before:top-0 before:h-[2px] before:bg-stone-200 before:content-[''] after:absolute after:inset-x-[128px] after:bottom-0 after:h-[2px] after:bg-stone-200 after:content-['']"
        style={{
          backgroundColor: themeToken.colorBgContainer,
        }}
      >
        <Button
          className="absolute left-1/2 z-[1] -translate-x-1/2 -translate-y-1/2 text-xs"
          disabled={disabled}
          size="small"
          shape="round"
          variant="outlined"
          onClick={() => {
            addBranch(node.id);
          }}
        >
          {t("workflow_node.action.add_branch")}
        </Button>

        {node.branches?.map((branch, index) => (
          <div
            key={branch.id}
            className="relative flex flex-col items-center before:absolute  before:left-1/2 before:top-0 before:h-full before:w-[2px] before:-translate-x-1/2 before:bg-stone-200 before:content-['']"
          >
            {index == 0 && (
              <>
                <div
                  className="absolute -left-px -top-1 h-2 w-1/2"
                  style={{
                    backgroundColor: themeToken.colorBgContainer,
                  }}
                ></div>
                <div
                  className="absolute -bottom-1 -left-px z-50 h-2 w-1/2"
                  style={{
                    backgroundColor: themeToken.colorBgContainer,
                  }}
                ></div>
              </>
            )}
            {node.branches && index == node.branches.length - 1 && (
              <>
                <div
                  className="absolute -right-px -top-1 h-2 w-1/2"
                  style={{
                    backgroundColor: themeToken.colorBgContainer,
                  }}
                ></div>
                <div
                  className="absolute -bottom-1 -right-px z-50 h-2 w-1/2"
                  style={{
                    backgroundColor: themeToken.colorBgContainer,
                  }}
                ></div>
              </>
            )}
            <div className="relative flex flex-col items-center">{renderBranch(branch, node.id, index)}</div>
          </div>
        ))}
      </div>

      <AddNode node={node} disabled={disabled} />
    </>
  );
};

export default memo(BranchNode);