class HTMLAtmiSignatureElement extends HTMLElement {
    static get observedAttributes() {
        return ["path", "date", "user", "disabled"]
    }

    currentMode = "unknown";
    imagePath = "";
    isDisabled = false;
    savedSign;
    sigPadApi;
    pathSign = "";
    dateSign = "";
    userSign = "";
    timer;
    shadow;

    constructor() {
        super();

        const divSignature = document.createElement("div");
        divSignature.id = "ima_signature";

        this.shadow = this.attachShadow({ mode: 'closed' });
        const styleSheet = document.createElement("link");
        styleSheet.rel = "stylesheet";
        styleSheet.type = "text/css";
        styleSheet.href = `/inc_js/signature-pad/assets/jquery.signaturepad.css?1775061671`;

        this.shadow.appendChild(styleSheet);
        const styleSheet2 = document.createElement("link");
        styleSheet2.rel = "stylesheet";
        styleSheet2.type = "text/css";
        styleSheet2.href = `/inc_css/design_2025.css?1775061562`;

        this.shadow.appendChild(styleSheet2);
        this.shadow.appendChild(divSignature);

    }

    get path() {
        return this.pathSign;
    }

    set path(value) {
        this.pathSign = value;
        this.recalculateCurrentMode();
    }

    get date() {
        return this.dateSign.toISOString();
    }

    set date(value) {
        if (typeof value === "undefined") {
            this.dateSign = undefined;
            this.recalculateCurrentMode();
            return;
        }
        const parsedDate = new Date(value);
        if (!isNaN(parsedDate) && parsedDate.getFullYear() > 2000) {
            this.dateSign = parsedDate;
            this.recalculateCurrentMode();
        } else {
            this.dateSign = undefined;
            this.removeAttribute("date"); // On retire l'attribut pour éviter les incohérences entre la valeur de l'attribut et la date affichée
        }
    }

    get user() {
        return this.userSign;
    }

    set user(value) {
        this.userSign = value;
        this.recalculateCurrentMode();
    }

    get disabled() {
        return this.isDisabled;
    }

    set disabled(value) {
        this.isDisabled = !!value;
        this.recalculateCurrentMode();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        switch (name) {
            case "path": this.path = newValue;
                break;
            case "date": this.date = newValue;
                break;
            case "user": this.user = newValue;
                break;
            case "disabled": this.disabled = newValue;
                break;
        }
    }

    connectedCallback() {
        this.recalculateCurrentMode();
    }

    desactivateCurrentMode() {
        this.sigPadApi = undefined;
        this.shadow.getElementById("ima_signature").replaceChildren(); // On vide l'intégralité de la popin
        this.currentMode = "unknown";
    }

    recalculateCurrentMode() {
        if (this.timer) clearTimeout(this.timer);
        const self = this;
        this.timer = setTimeout(() => self.calculateCurrentMode(), 500);
    }

    calculateCurrentMode() {
        if (this.pathSign) return this.activateModeImage();
        if (this.dateSign || this.userSign) return this.activateModeText();
        if (this.isDisabled) return this.activateModeDisabled();
        return this.activateModeSign();
    }

    activateModeImage() {
        this.desactivateCurrentMode();
        this.currentMode = "image";
        const self = this;

        const divSignature = this.shadow.getElementById("ima_signature");
        const signImg = document.createElement("img");
        signImg.classList.add("signImg");
        signImg.style.width = "405px";
        signImg.style.height = "auto";
        signImg.style.margin = "auto";
        signImg.style["background-color"] = "white";
        if (this.pathSign.length < 128) signImg.src = "/inc_librairie/readfile.php?file="+this.pathSign;
        else signImg.src = this.pathSign;

        const allNode = [];
        allNode.push(signImg);

        if (this.dateSign || this.userSign) {
            const signInfo = document.createElement("div");
            signInfo.classList.add("signInfo");
            const textUser = (this.userSign)? `Par ${this.userSign}`:"";
            const textDate = (this.dateSign)? `Le ${dateTimeFormatter.format(this.dateSign)}`:"";
            const textSeparator = (this.userSign && this.dateSign)? "\n":"";
            signInfo.innerText = `${textUser}${textSeparator}${textDate}`;
            
            allNode.push(signInfo);
        }

        if (!this.isDisabled) {
            const SigButtonDiv = document.createElement("div");
            SigButtonDiv.style.display = "flex";
            SigButtonDiv.style["flex-direction"] = "row";

            const SigButton = document.createElement("div");
            SigButton.classList.add("petit_btn", "supprSigna");
            SigButton.innerText = `Effacer`;
            SigButton.addEventListener("click", function(e) {
                self.eraseSign();
            });

            SigButtonDiv.replaceChildren(SigButton)
            allNode.push(SigButtonDiv);
        }
        divSignature.replaceChildren(...allNode);
    }

    activateModeText() {
        this.desactivateCurrentMode();
        this.currentMode = "text";
        const self = this;

        const divSignature = this.shadow.getElementById("ima_signature");
        const signText = document.createElement("div");
        signText.classList.add("signText");

        const textUser = (this.userSign)? `Par ${this.userSign}`:"";
        const textDate = (this.dateSign)? `Le ${dateTimeFormatter.format(this.dateSign)}`:"";
        const textSeparator = (this.userSign && this.dateSign)? "\n":"";
        signText.innerText = `Signé ${textUser}${textSeparator}${textDate}`;

        if (!this.isDisabled) {
            const SigButtonDiv = document.createElement("div");
            SigButtonDiv.style.display = "flex";
            SigButtonDiv.style["flex-direction"] = "row";

            const SigButton = document.createElement("div");
            SigButton.classList.add("petit_btn", "supprSigna");
            SigButton.innerText = `Effacer`;
            SigButton.addEventListener("click", function(e) {
                self.eraseSign();
            });

            SigButtonDiv.replaceChildren(SigButton)
            divSignature.replaceChildren(signText, SigButtonDiv);
        } else {
            divSignature.replaceChildren(signText);
        }
    }

    activateModeDisabled() {
        this.desactivateCurrentMode();
        this.currentMode = "disabled";
        const self = this;

        const divSignature = this.shadow.getElementById("ima_signature");
        const signText = document.createElement("div");
        signText.classList.add("signText");
        signText.innerText = `Non signé`;

        divSignature.replaceChildren(signText);
    }

    activateModeSign() {
        this.desactivateCurrentMode();
        this.currentMode = "sign";
        const self = this;

        const divSignature = this.shadow.getElementById("ima_signature");
        const sigPad = document.createElement("div");
        sigPad.classList.add("sigPad");
        sigPad.style.width = "405px";
        sigPad.style.height = "auto";
        
        const sigNav = document.createElement("ul");
        sigNav.classList.add("sigNav");

        const sigNavDrawIt = document.createElement("li");
        sigNavDrawIt.classList.add("drawIt");
        sigNavDrawIt.innerHTML = `<a href="#draw-it">Signer</a>`;

        const sigNavClear = document.createElement("li");
        sigNavClear.classList.add("clearButton");
        sigNavClear.innerHTML = `<a href="#clear">Effacer</a>`;
        sigNavClear.addEventListener("click", function(e) {self.eraseSign()});

        sigNav.replaceChildren(sigNavDrawIt, sigNavClear);


        const sigWrapper = document.createElement("div");
        sigWrapper.classList.add("sig", "sigWrapper");
        sigWrapper.style.width = "auto";
        sigWrapper.style.height = "auto";
        sigWrapper.innerHTML = `<div class="typed"></div><canvas class="pad" width="400" height="150"></canvas>`;
        sigPad.replaceChildren(sigNav, sigWrapper);

        // Ajout du bouton pour la signature manuelle
        const SigButtonDiv = document.createElement("div");
        SigButtonDiv.style.display = "flex";
        SigButtonDiv.style["flex-direction"] = "row";

        const SigButton = document.createElement("div");
        SigButton.classList.add("petit_btn", "signature_manuel");
        SigButton.innerText = `Signer`;
        SigButton.addEventListener("click", function(e) {
            if (self.savedSign) {
                self.setAttribute("path", self.getSignatureImage())
            }
            self.dispatchEvent(new CustomEvent("signatureManuelle"));
        });
        
        SigButtonDiv.replaceChildren(SigButton)
        divSignature.replaceChildren(sigPad, SigButtonDiv);

        this.sigPadApi = $(sigPad).signaturePad({
            defaultAction: "drawIt",
            lineTop: 300,
            displayOnly: false,
            penWidth: 4,
            onDrawEnd: function() {
                self.savedSign = self.sigPadApi.getSignature();
            }
        });

        if (this.savedSign) this.sigPadApi.regenerate(this.savedSign);

    }

    eraseSign() {
        this.savedSign = undefined;
        this.removeAttribute("path");
        this.pathSign = "";
        this.removeAttribute("date");
        this.dateSign = undefined;
        this.removeAttribute("user");
        this.userSign = "";

        this.calculateCurrentMode();
    }

    getSignatureImage() {
        if (this.sigPadApi) return this.sigPadApi.getSignatureImage();
    }

    getValue() {
        if (this.currentMode === "sign" && this.savedSign) return `sign:${this.getSignatureImage()}`;
        if (this.currentMode === "image" && this.savedSign) return `sign:${this.pathSign}`;
        if (this.currentMode === "image") return `path:${this.pathSign}`;
        if (this.currentMode === "text") return `text:${this.userSign}|${this.dateSign}`;
        return "none";
    }
}


var dateTimeFormatter = new Intl.DateTimeFormat("fr", {dateStyle: "short", timeStyle: "short"});
customElements.define("atmi-signature", HTMLAtmiSignatureElement);