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

interface StartNodeProps extends Node {
  edges?: Edge[];
}

export default function StartNode({
  id,
  edges = [],
}: NodeProps<StartNodeProps> & { edges?: Edge[] }) {
  const { t } = useTranslation();
  const isHandleConnected = edges.some(
    (e: Edge) => e.source === id && e.sourceHandle === "1"
  );
  return (
    <div
      style={{
        border: "0px solid",
        borderRadius: 8,
        backgroundColor: "white",
        width: "248px",
      }}
    >
      <div
        style={{
          display: "flex",
          alignItems: "center",
          paddingLeft: "12px",
          height: "40px",
          fontWeight: "600px",
          fontSize: "16px",
          gap: "12px",
          backgroundColor: "#D4E0BD",
          borderRadius: "8px 8px 0 0",
        }}
      >
        <div
          style={{
            height: "24px",
            width: "24px",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <img
            style={{ height: "16px", width: "18px" }}
            src="/icons/node/home.svg"
            alt="start logo"
          />
        </div>
        {t("startNode")}
      </div>
      <div style={{ height: "1px", backgroundColor: "#E2E2E2" }}></div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          padding: "12px",
          fontSize: "14px",
        }}
      >
        {t("startNodeDescription")}
      </div>
      <Handle
        type="source"
        position={Position.Bottom}
        id="1"
        style={
          isHandleConnected
            ? { ...HANDLE_STYLE_CONNECTED }
            : { ...HANDLE_STYLE_DISCONNECTED }
        }
      />
    </div>
  );
}