import MagnonElement from "../../src/magnon-element.js";

import html from "./notification.content.js";
import css from "./notification.style.js";

import "../magnon-styles/magnon-styles.js";
import "../magnon-icon/magnon-icon.js";
import "../magnon-icon-button/magnon-icon-button.js";

export class MagnonNotification extends MagnonElement {
    constructor() {
        super({ content: html + css });
    }

    static get elementName() {
        return "magnon-notification";
    }

    static get propertyAttributes() {
        return {
            string: ["color"]
        };
    }

    contentReady() {
        const margin = window.getComputedStyle(this).margin;

        this.style.transition = "none";
        this.style.height = "0px";
        this.style.margin = "0px 0px";

        this.root.querySelector(".close-button").addEventListener("click", () => this.close());

        setTimeout(() => {
            this.style.height = "";
            const height = this.offsetHeight;

            this.style.height = "0px";

            setTimeout(() => {
                this.style.transition = "";

                this.style.margin = margin;
                this.style.height = `${height}px`;

                this.addEventListener("animationstart", () => {
                    this.style.opacity = 1;
                });
            }, 100);
        }, 100);
    }

    propertySet(property, old, value) {
        if (property === "color") {
            const newValue = value.startsWith("--") ? `var(${value})` : value;
            this.style.setProperty("--magnon-notification-color", newValue);
        }
    }

    close() {
        this.fire("close");

        this.style.transform = "scaleY(0)";
        const end = () => {
            this.style.height = "0px";
            this.style.margin = "0px";
            this.removeEventListener("transitionend", end);
            const newEnd = () => {
                this.parentElement.removeChild(this);
                this.removeEventListener("transitionend", newEnd);
            };
            this.addEventListener("transitionend", newEnd);
        };
        this.addEventListener("transitionend", end);
    }
}

MagnonNotification.init();

@@ -599,24 +599,163 @@
 ntReady() %7B%0A
+        this.root.querySelector(%22.close-button%22).addEventListener(%22click%22, () =%3E this.close());%0A%0A        requestAnimationFrame(() =%3E %7B%0A    
         cons
@@ -804,32 +804,36 @@
 argin;%0A%0A        
+    
 this.style.trans
@@ -848,32 +848,36 @@
 %22none%22;%0A        
+   
+ 
 this.style.heigh
@@ -879,32 +879,36 @@
 height = %220px%22;%0A
+    
         this.sty
@@ -939,101 +939,8 @@
     
-    this.root.querySelector(%22.close-button%22).addEventListener(%22click%22, () =%3E this.close());%0A%0A
     
@@ -954,32 +954,36 @@
 Timeout(() =%3E %7B%0A
+    
             this
@@ -1002,16 +1002,20 @@
 t = %22%22;%0A
+    
         
@@ -1057,32 +1057,36 @@
 t;%0A%0A            
+    
 this.style.heigh
@@ -1101,32 +1101,36 @@
 %22;%0A%0A            
+    
 setTimeout(() =%3E
@@ -1140,32 +1140,36 @@
                 
+  
+  
 this.style.trans
@@ -1189,32 +1189,36 @@
                 
+    
 this.style.margi
@@ -1237,32 +1237,36 @@
                 
+   
+ 
 this.style.heigh
@@ -1285,16 +1285,20 @@
 t%7Dpx%60;%0A%0A
+    
         
@@ -1365,32 +1365,36 @@
                 
+    
 this.style.opaci
@@ -1417,17 +1417,46 @@
         
+ 
-%7D
+   %7D);%0A                %7D, 100
 );%0A     
@@ -1476,29 +1476,24 @@
 );%0A        %7D
-, 100
 );%0A    %7D%0A%0A  

Fix notification creation in webkit