import { CocoComponent } from "@assets/js/base/coco";
import { getData } from "@helpers/alpine";
import { basename } from "@helpers/path";

export default CocoComponent("imagePickerButton", ({ src }) => {
  return {
    selectedImage: {
      name: basename(src),
      file: null,
      data: src,
    },

    getPicker() {
      return getData(
        this.$root.querySelector("[data-role='image-picker'").firstElementChild
      );
    },

    handleExternalDrop(event) {
      this.readFile(event.dataTransfer.files[0]);
    },

    readFile(file) {
      const reader = new FileReader();

      reader.addEventListener("load", () => {
        const selectedImage = {
          name: file.name,
          file,
          data: reader.result,
        };

        this.$dispatch("image-picker:change", { image: selectedImage });

        this.selectedImage = selectedImage;

        if (this.dropdown) {
          this.dropdown.hide();
        }
      });

      reader.readAsDataURL(file);
    },

    clearSelectedImage() {
      this.dropdown.hide();
      this.selectedImage = { name: null, data: null, file: null };
    },

    setSelectedImage(image) {
      this.dropdown.hide();
      this.selectedImage = image;
    },

    onDropdownMount({ detail }) {
      this.dropdown = detail.dropdown;
      this.getPicker().setImage(this.selectedImage, true);
    },
  };
});