import { CocoComponent } from "@js/coco";
import { getData } from "@helpers/alpine";

export default CocoComponent("appImagePickerButton", ({ image }) => {
  return {
    selectedImage: image,

    dropdown: null,

    init() {
      this.$watch("selectedImage", (file) => {
        const dataTransfer = new DataTransfer();
        if (file && file.file instanceof File) {
          dataTransfer.items.add(file.file);
        }
        this.$refs.fileInput.files = dataTransfer.files;

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

    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", () => {
        this.selectedImage = {
          name: file.name,
          file: file,
          data: reader.result,
        };
      });

      // reader.addEventListener("error", () => {
      //   this.errors.push(`Error reading file: ${file.name}`);
      // });

      reader.readAsDataURL(file);
    },

    clearSelectedImage() {
      this.dropdown.hide();
      this.selectedImage = null;
    },

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

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