import React from "react";

class PrefixedImageControl extends React.Component {
  handleChange = async (event) => {
    const file = event.target.files[0];
    if (!file) return;

    // Add your prefix here
    const prefix = "feature-";
    const newFile = new File([file], prefix + file.name, { type: file.type });

    // Use Decap's media library to persist the file
    const { onChange, mediaPaths, field } = this.props;
    const uploaded = await this.props.mediaLibrary.persistMedia(newFile);

    // Save the public path
    onChange(uploaded.public_path || uploaded.url);
  };

  render() {
    const value = this.props.value || "";
    return (
      <div>
        <input type="file" accept="image/*" onChange={this.handleChange} />
        {value && <img src={value} alt="" style={{ maxWidth: "200px" }} />}
      </div>
    );
  }
}

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

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