import { Handle, NodeProps, Position, Node, Edge } from "@xyflow/react";
import {
  HANDLE_STYLE_CONNECTED,
  HANDLE_STYLE_CONNECTED_V,
  HANDLE_STYLE_DISCONNECTED,
  HANDLE_STYLE_DISCONNECTED_V,
} from "./defaultHandleStyle";
import { useTranslation } from "react-i18next";
import { useState } from "react";

interface IfElseNodeProps extends Node {
  condition: string;
  edges?: Edge[];
}

export default function IfElseNode({
  id,
  data,
  edges = [],
}: NodeProps<IfElseNodeProps> & { edges?: Edge[] }) {
  const { t } = useTranslation();

  const isHandle1Connected = edges.some(
    (e: Edge) => e.source === id && e.sourceHandle === "1"
  );
  const isHandle2Connected = edges.some(
    (e: Edge) => e.source === id && e.sourceHandle === "2"
  );
  return (
    <>
      <div
        style={{
          border: "0px solid",
          borderRadius: 8,
          backgroundColor: "white",
          width: "248px",
          minHeight: "144px",
          position: "relative",
        }}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            paddingLeft: "12px",
            height: "48px",
            fontWeight: "600px",
            fontSize: "16px",
            gap: "12px",
          }}
        >
          <img
            style={{ height: "24px", width: "24px" }}
            src="/icons/node/ifElse.svg"
            alt="if else logo"
          />
          {t("ifElseNode")}
        </div>
        <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            padding: "12px",
            fontSize: "14px",
            minHeight: "48px",
            position: "relative",
          }}
        >
          {t("conditionIf", { condition: data.condition })}
          <Handle
            type="source"
            position={Position.Right}
            id="1"
            style={{
              ...(isHandle1Connected
                ? { ...HANDLE_STYLE_CONNECTED_V }
                : { ...HANDLE_STYLE_DISCONNECTED_V }),
              position: "absolute",
              top: "50%",
              transform: "translateY(-50%)",
            }}
          />
        </div>
        <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>

        <div
          style={{
            display: "flex",
            alignItems: "center",
            paddingLeft: "12px",
            fontSize: "14px",
            height: "48px",
          }}
        >
          {t("conditionElse")}
        </div>

        <Handle
          type="target"
          position={Position.Top}
          id="input"
          style={{ ...HANDLE_STYLE_CONNECTED }}
        />
        <Handle
          type="source"
          position={Position.Bottom}
          id="2"
          style={
            isHandle2Connected
              ? { ...HANDLE_STYLE_CONNECTED }
              : { ...HANDLE_STYLE_DISCONNECTED }
          }
        />
      </div>
    </>
  );
}