import withToolTip from "../../../hoc/withToolTip";
import { Style } from "../../DomainProps";
import withValidations from "../../../hoc/withValidations";
import withHelperText from "../../../hoc/withHelperText";
import withLabel from "../../../hoc/withLabel";
import loadIcon from "./loadIcon";
import { Button } from "@progress/kendo-react-buttons";

type IconWidgetViewProps = {
  widgetStyle?: Style;
  name?: string;
  fillMode: "link" | "clear" | "flat" | "outline";
  onClick: (event: any) => void;
};

const IconWidgetView = ({
  widgetStyle,
  name,
  fillMode,
  onClick,
}: IconWidgetViewProps) => {
  // Handle fillMode to ensure it's a valid value
  const validFillMode = fillMode && ["link", "clear", "flat", "outline"].includes(fillMode) ? fillMode : undefined;

  return (
    <Button
      className={widgetStyle?.className}
      style={widgetStyle?.inline}
      id={widgetStyle?.id}
      onClick={onClick}
      svgIcon={loadIcon(name ?? "")}
      fillMode={validFillMode}
    />
  );
};

export default withValidations(
  withToolTip(withHelperText(withLabel(IconWidgetView)))
);