import { Button } from "@progress/kendo-react-buttons";
import { Link } from "react-router-dom";
import withToolTip from "../../../hoc/withToolTip";
import { ComprehensiveProps } from "../../DomainProps";

export interface LinkProps extends ComprehensiveProps {
  role?: "link" | "image" | "button";
  icon?: string | undefined;
  imageUrl?: string | undefined;
  imgAlt?: string | undefined;
  defaultImageUrl?: string | undefined;
  iconClass?: string | undefined;
  isInternal?: boolean | undefined;
  size?: "small" | "medium" | "large";
  fillMode?: "solid" | "link" | "outline" | "flat";
  rounded?: "small" | "medium" | "full" | "large";
  bgColor?: string | undefined;
  title?: string | undefined;
  path?: any;
  elementToNavigate?: React.ReactElement | undefined;
  target?: "_blank" | "_self" | "_parent" | "_top" | undefined;
}

function LinkWidget({
  id,
  role,
  icon,
  imageUrl,
  defaultImageUrl,
  imgAlt,
  iconClass,
  isInternal,
  size,
  fillMode,
  rounded,
  bgColor,
  title,
  path,
  elementToNavigate,
  target,
  widgetStyle,
  rootStyle,
}: LinkProps) {
  // Handle image with fallback
  const renderImage = () => {
    if (!imageUrl) return null;
    
    return (
      <img 
        src={imageUrl} 
        alt={imgAlt} 
        onError={({ currentTarget }) => {
          if (defaultImageUrl) {
            currentTarget.onerror = null;
            currentTarget.src = defaultImageUrl;
          }
        }}
      />
    );
  };

  return role === "link" ? (
    isInternal ? (
      <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
        <Link to={path}>{title}</Link>
      </div>
    ) : (
      <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
        <a href={path} target={target}>
          {title}
        </a>
      </div>
    )
  ) : role === "image" ? (
    isInternal ? (
      <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
        <Link to={path}>
          {renderImage()}
        </Link>
      </div>
    ) : (
      <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
        <a href={path} target={target}>
          {renderImage()}
        </a>
      </div>
    )
  ) : isInternal ? (
    <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
      <Link to={path}>
        <Button>{title}</Button>
      </Link>
    </div>
  ) : (
    <div id={widgetStyle?.id} className={widgetStyle?.className || ""}>
      <a href={path} target={target}>
        <Button>{title}</Button>
      </a>
    </div>
  );
}

export default withToolTip(LinkWidget);