import { CocoComponent } from "@assets/js/coco/component";

export default CocoComponent("alertMessage", () => {
  return {
    alert: null,
    dismissed: false,
    forceMultiLine: false,
    dismissDuration: 300,

    init() {
      this.checkSingleLineWrap = Alpine.throttle(
        this.checkSingleLineWrap.bind(this),
        200
      );
    },

    dismiss() {
      if (this.$options.dismissable) {
        this.$dispatch("alert:dismiss", {
          alert: this,
          duration: this.dismissDuration,
        });

        this.dismissed = true;

        setTimeout(() => this.remove(), this.dismissDuration);
      }
    },

    remove() {
      this.$nextTick(() => this.$dispatch("alert:removed", { alert: this }));
      this.$root.remove();
    },

    checkSingleLineWrap({ height }) {
      this.forceMultiLine = false;
      if (height > 24 && this.$options.singleLine) {
        this.$nextTick(() => {
          this.forceMultiLine = true;
        });
      }
    },

    root: {
      "x-options": '["dismissable", "singleLine", "dismissAfterAction"]',
      ":class": "{'force-multi-line': forceMultiLine}",
    },
  };
});