import style from "antd/lib/message/style/index.css";

angular
    .module("esNgAntd")
    .factory("message", function ($compile, $rootScope, esNgAntd) {

        function Message(type, content, second = 3) {
            esNgAntd.createStyle("ant-message", style);

                if (!document.querySelector(".ant-message")) {
                    let wrapperTemplate = `<div class="ant-message"><span></span></div>`;
                    let wrapperElement = document.createElement("div");
                    wrapperElement.innerHTML = wrapperTemplate;
                    document.body.appendChild(wrapperElement);
                }

                let messageWrapperElement = document.createElement("div");
                messageWrapperElement.innerHTML = this.getTemplate(
                    type,
                    content
                );
                let messageElement = messageWrapperElement.childNodes[0];
                document
                    .querySelector(".ant-message span")
                    .appendChild(messageElement);
                $compile(messageElement)($rootScope);

                setTimeout(() => {
                    messageElement.remove();
                }, second * 1000);
        }

        Message.prototype.getTemplate = function (type, content) {
            let icon = {
                info: "InfoCircleFilled",
                success: "CheckCircleFilled",
                error: "CloseCircleFilled",
                warning: "InfoCircleFilled",
            };
            return `<div class="ant-message-notice"><div class="ant-message-notice-content"><div class="ant-message-custom-content ant-message-${type}"><antd-icon type="${icon[type]}"></antd-icon><span>${content}</span></div></div></div>`;
            
        }

        return {
            info: function (content, second) {
                new Message("info", content, second);
            },
            success: function (content, second) {
                new Message("success", content, second);
            },
            error: function (content, second) {
                new Message("error", content, second);
            },
            warning: function (content, second) {
                new Message("warning", content, second);
            },
        };
    });