class PrefixedImageControl extends React.Component {
  openMediaLibrary = () => {
    this.props.mediaLibrary.open({
      allowMultiple: false,
      config: { allowMultiple: false },
      controlID: this.props.forID,
      value: this.props.value,
      field: this.props.field,
      onInsert: (files) => {
        if (!files || files.length === 0) return;
        const file = files[0];
        const prefix = "feature-";
        // If already prefixed, don't double-prefix
        const fileName = file.name.startsWith(prefix) ? file.name : prefix + file.name;
        const newFile = new File([file], fileName, { type: file.type });
        this.props.mediaLibrary.persistMedia(newFile).then((uploaded) => {
          this.props.onChange(uploaded.public_path || uploaded.url);
        });
      },
    });
  };

  render() {
    const value = this.props.value || "";
    return (
      React.createElement("div", null,
        React.createElement("button", { type: "button", onClick: this.openMediaLibrary },
          value ? "Change Image" : "Add Image"
        ),
        value && React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px", display: "block", marginTop: "1em" } })
      )
    );
  }
}

const PrefixedImageWidget = {
  name: "prefixed-image",
  controlComponent: PrefixedImageControl,
  previewComponent: ({ value }) =>
    value ? React.createElement("img", { src: value, alt: "", style: { maxWidth: "200px" } }) : null,
};

window.CMS.registerWidget(
  PrefixedImageWidget.name,
  PrefixedImageWidget.controlComponent,
  PrefixedImageWidget.previewComponent
);