const { ipcRenderer } = require("electron");

class Index {
    constructor() {
        this.color = "";
        this.size = "13px";
        this.UserInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.socket = io("ws://127.0.0.1:3000");
        // console.log(this.socket);
        this.socketEmit()
        this.bindEvent()
    }

    socketEmit() {
        this.socket.emit("UserLogin", this.UserInfo)

        this.socket.emit("getOnlineUser", this.UserInfo)
        this.socket.on("PushMessage", (arg) => {
            this.sendMessage(arg, "")
        })

        this.socket.on("PushShake", (arg) => {
            ipcRenderer.send("startShake")
        })

        this.socket.on("PushOnlineUser", (arg) => {
            $(".content_right .title").text(`群成员 ${arg.length}`)
            $(".content_right ul").empty()
            arg.forEach(v => {
                $(".content_right ul").append(`
                    <li>
                        <div class="user">
                            <img src="${v.img}" alt="">
                            <span>${v.name}</span>
                        </div>
                        ${
                            v.type == 1 
                            ? `<i class="iconfont icon-eye"></i>`
                            : v.type == 2
                              ? `<i class="iconfont icon-gif"></i>`
                              : ''
                        }
                    </li>
                `)
            });
        })

        this.socket.on("SystemMessage", (arg) => {
            $(".content_left").append(`
            <li class="system">
                <span>${arg}</span>
            </li>
            `)
        })
    }

    bindEvent() {
        var self = this;
        $(".header_left img").attr("src", this.UserInfo.img)
        $(".header_left span").text(this.UserInfo.name)
        $(".header_text").text(this.UserInfo.room)

        $(".footer_input").keydown((e) => {
         
            if (e.keyCode == 13 || e.keyCode == 108) {
                e.preventDefault();
                this.UserInfo.content = `<div style="color: ${this.color}; font-size: ${this.size};">${$(".footer_input").html()}</div>`
                $(".footer_input").html("")
                this.socket.emit("sendMessage", this.UserInfo)
                this.sendMessage(this.UserInfo);
            }
        })

        $(".menu_footer li").click(function() {
            $(this).addClass("active").siblings().removeClass("active")
            $(".menu_content div").eq($(this).index()).addClass("active").siblings().removeClass("active")

            $(".menu_title").text($(this).text())
        })


        for (var i = 0; i <= 274; i++ ) {
            $(".smiling").append(`
                <img class="smiling_img" src="./img/icon/${i}fix@2x.png" alt="">
            `)
        }

        for (var i = 0; i <= 12; i++ ) {
            $(".gif").append(`
                <img class="gif_img" src="./img/gif/${i}.gif" alt="">
            `)
        }

        $(".gif img").click(function() {
            $(".footer_input").append($(this).clone())
        })

        $(".smiling img").hover(
            function() {
                $(this).attr({
                    src: `./img/icon/${$(this).index()}@2x.gif`
                })
            },
            function() {
                $(this).attr({
                    src: `./img/icon/${$(this).index()}fix@2x.png`
                })
            }
        );

        $(".smiling img").click(function() {
            $(".footer_input").append($(this).clone())
        });

        $(".footer_menu .aaa").click(function() {
            if ($(".menu_footer li").eq($(this).index()).hasClass("active")) {
                $(".footer_topmenu").hide()
                $(".menu_footer li").eq($(this).index()).removeClass("active")
              
            } else {
                $(".footer_topmenu").show()
                $(".menu_footer li").eq($(this).index()).click()
            }
        })

        $(".font input").on("input", function () {
            self.color = $(this).val()
        })

        $(".font select").on("change", function () {
            self.size = $(this).val()
        })

        $(".icon-shake").click(function () {
            self.socket.emit("SetShake", self.UserInfo)
        })
       
    }

    sendMessage(data,type = "right") {
        $(".content_left").append(`
            <li class="${type}">
                <img class="avth" src="${data.img}" alt="">
                <div class="message">
                    <div class="name">${data.name}</div>
                    <div class="message_text">${data.content}</div>
                </div>
            </li>
        `)
    }

}

new Index();