import { Icon, IconProps } from "@progress/kendo-react-common";
import { Avatar } from "@progress/kendo-react-layout";
import withToolTip from "../../../hoc/withToolTip";
import { ComprehensiveProps } from "../../DomainProps";

export interface ShapeProps extends ComprehensiveProps {
  icon?: IconProps;
  imageUrl?: string;
  imgAlt?: string;
  defaultImageUrl?: string;
  iconClass?: string;
  size?: "small" | "medium" | "large";
  fillMode?: "solid" | "outline";
  rounded?: "small" | "medium" | "large" | "full";
  bgColor?: string;
  title?: string;
  border?: string;
  role?: "image" | "text" | "icon";
  customSize?: number;
}

function ShapeWidget({
  rounded,
  imageUrl,
  role,
  imgAlt,
  title,
  iconClass,
  size,
  fillMode,
  defaultImageUrl = "",
  bgColor,
  customSize,
  icon,
  widgetStyle,
}: ShapeProps) {
  let customStyle: any = {};
  if (bgColor) {
    customStyle = { ...customStyle, backgroundColor: bgColor };
  }
  if (customSize) {
    customStyle = { ...customStyle, width: customSize, height: customSize };
  }
  
  // Handle fillMode to ensure it's a valid value
  const validFillMode = fillMode && ["solid", "outline"].includes(fillMode) ? fillMode : undefined;

  return (
    <Avatar
      fillMode={validFillMode}
      type={role}
      size={size}
      rounded={rounded}
      className={widgetStyle?.className || ""}
      style={customStyle}
    >
      {role === "image" ? (
        <img
          src={imageUrl}
          alt={imgAlt}
          onError={({ currentTarget }) => {
            currentTarget.onerror = null;
            currentTarget.src = defaultImageUrl;
          }}
        />
      ) : role === "text" ? (
        <span>{title}</span>
      ) : role === "icon" ? (
        <Icon {...icon} />
      ) : role === "iconClass" ? (
        <span className={iconClass} />
      ) : null}
    </Avatar>
  );
}

export default withToolTip(ShapeWidget);