import m from 'http://talk.kospo.co.kr:3000/static/bundle/mithril-2.2.2/mithril.js';
import {global} from 'http://talk.kospo.co.kr:3000/static/js/module/variable.js';
import SocketQueue from 'http://talk.kospo.co.kr:3000/static/js/module/queue.js';
import {talkEvent} from 'http://talk.kospo.co.kr:3000/static/js/module/talkEvent.js';
import {
    talkInit,
    getUser,
    getTalkList,
    getMoreMessageLine,
    getMessageSearch,
    getAllContentSearch,
    getManual,
    getVideoManual,
    setTalkMark,
    setChatRead,
    setITSMSatis,
    setSCMSatis,
    deleteTalk, getMessageAll,
} from 'http://talk.kospo.co.kr:3000/static/js/module/apis.js';
import {attachUpload} from 'http://talk.kospo.co.kr:3000/static/js/module/attach.js'
import {messageMapping, talkMapping} from "http://talk.kospo.co.kr:3000/static/js/module/render.js";
import {
    Carousel,
    Dropdown,
    Modal,
    Tab
} from "http://talk.kospo.co.kr:3000/static/bundle/bootstrap-5.1.3/js/bootstrap.esm.js";
import AWN from "http://talk.kospo.co.kr:3000/static/bundle/awesome-notifications-3.1.1/index.js";
import "http://talk.kospo.co.kr:3000/static/bundle/stompjs-esm/stomp.js";
import SimpleBar from "http://talk.kospo.co.kr:3000/static/bundle/simplebar-6.2.7/simplebar.js";
import Common from "http://talk.kospo.co.kr:3000/static/js/utils.js";
import Hub from "http://talk.kospo.co.kr:3000/static/js/module/hub.js";
import {HubEvent} from "http://talk.kospo.co.kr:3000/static/js/module/hubEvent.js";
import {requestNotificationPermission} from "http://talk.kospo.co.kr:3000/static/js/notification.js";

const default_options = {
    url: '',
    button: {},
    container: {},
    serviceWorkerLocation: '',
}

class Talk {

    constructor(options) {
        global.option = Common.mergeObject(options, default_options)

        /*서비스워커 윈도우 클라이언트 특정 하기 위한 url 맵핑*/
        if(options.url !== '' && options.url !== undefined) {
            global.currentUrl = options.url;
        } else {
            global.currentUrl = window.location.href;
        }
        if (global.option.workId) global.currentWorkId = global.option.workId;
        global.apiUrl = "http://talk.kospo.co.kr:3000";
        // global.apiUrl = "http://kisp.kospo.co.kr:8010";

        //  현재탭의 고유 아이디 생성
        global.tabId = talkEvent.generateTabUUID()

        // 헬프톡 브라우저 위치 설정
        if (global.option.position === 'br') {
            global.option.vertical = 'bottom';
            global.option.horizontal = 'right'
        } else if (global.option.position === 'bl') {
            global.option.vertical = 'bottom';
            global.option.horizontal = 'left'
        } else if (global.option.position === 'tr') {
            global.option.vertical = 'top';
            global.option.horizontal = 'right'
        }
        if (global.option.position === 'tl') {
            global.option.vertical = 'top';
            global.option.horizontal = 'left'
        }

        // api 호출 공통 로직 재정의
        global.request = (options) => {
            options.url = `${global.apiUrl}${options.url}`

            if (global.option.encSabun) {
                options.headers = {
                    "Authentication": global.option.encSabun
                };
            }
            return m.request(options)
        }

        global.queue = new SocketQueue()

    }

    /*잠금화면으로 이동안하도록 조치*/
    async requestWakeLock() {
        try {
            if ('wakeLock' in navigator) {
                const wakeLock = await navigator.wakeLock.request('screen')
                console.log('wake lock is active', wakeLock)
            }
        } catch(e) {
            console.log(e)
        }
    }

    /*메시지 전송후 소켓 통신이 없을시 재접속 로직*/
    checker() {
        if(global.checker.flag) {
            const currentTalkId = localStorage.getItem(global.tabId);
            console.log(new Date() - global.checker.inDate)
            if(new Date() - global.checker.inDate > 3000) {
                HubEvent.kill(global.talkParams({
                    type: 'KILL',
                    channelSabun: global.user.sabun
                }))

                talkEvent.allUnsubscribe();
                global.registration.unregister();
                global.checker.flag = false;
                global.checker.inDate = '';
                global.currentServer = '';
                global.talkData = [];
                Common.sleep(200).then(() => {
                    global.hub = new Hub()
                    /*서비스워커 설치*/
                    global.hub.install().then(() => {
                        /* 서비스워커 서버로 연결 */
                        global.hub.start();

                        /* 마스터는 소켓 접속 및 톡방 리스트 호출 */
                        talkEvent.connect().then(() => {
                            // 참여중인 톡방 호출 및 구독
                            try {
                                getTalkList(true).then(async (isEmpty) => {
                                    if (!isEmpty) {
                                        getMessageAll(true).then(() => {
                                            const cacheTalk = global.talkData.filter((talk) => talk.talkId === currentTalkId)[0];
                                            messageMapping(currentTalkId, cacheTalk.talkMessages, 'before', true)
                                        })

                                    }
                                });
                            } catch (e) {
                                window.location.reload()
                            }

                            // 서버측에 HUB 정보 저장
                            HubEvent.start(global.talkParams({
                                type: 'START',
                                tabId: global.tabId
                            }))
                            // 다른탭에 연결 된 소켓이 있다면 종료 명령
                            HubEvent.send(global.talkParams({
                                type: 'UNSUBSCRIBE',
                                tabId: global.tabId
                            }))

                            /// 개인 사번 소켓 연결
                            try {
                                global.subscribeList[global.user.sabun] = talkEvent.userSubscribe();
                            } catch (e) {
                            }
                            // 업무별 소켓 연결
                            try {
                                global.subscribeList[global.work.workId] = talkEvent.workSubscribe();
                            } catch (e) {
                            }
                        })
                    }).catch(() => {
                    });
                })
            }
        }
    }

    // 헬프톡 실행
    run() {
        return new Promise(async (resolve, reject) => {
            if ('serviceWorker' in navigator) {
                //사용자 정보 조회
                await getUser()
                if (global.user !== null) {
                    // const getUrl = new URL(window.location.href);
                    // global.requestParams = getUrl.searchParams\

                    const $root = document.createElement('div')
                    $root.style.display = 'none';
                    $root.classList.add('chat-root')
                    $root.setAttribute('id', 'chat-area')
                    document.body.append($root)

                    /*html 주입*/
                    this.#htmlInjection();

                    /*현재 접속 업무 정보 조회*/
                    talkInit();

                    global.hub = new Hub()

                    /*서비스워커 설치*/
                    global.hub.install().then(() => {
                        /* 서비스워커 서버로 연결 */
                        global.hub.start();

                        /* 마스터는 소켓 접속 및 톡방 리스트 호출 */
                        talkEvent.connect().then(() => {
                            // 참여중인 톡방 호출 및 구독
                            try {
                                getTalkList(true).then(async (isEmpty) => {
                                    if (!isEmpty) {
                                        getMessageAll(true)
                                    }
                                });
                            } catch (e) {
                                window.location.reload()
                            }

                            // 서버측에 HUB 정보 저장
                            HubEvent.start(global.talkParams({
                                type: 'START',
                                tabId: global.tabId
                            }))
                            // 다른탭에 연결 된 소켓이 있다면 종료 명령
                            HubEvent.send(global.talkParams({
                                type: 'UNSUBSCRIBE',
                                tabId: global.tabId
                            }))

                            /// 개인 사번 소켓 연결
                            try {
                                global.subscribeList[global.user.sabun] = talkEvent.userSubscribe();
                            } catch (e) {
                            }
                            // 업무별 소켓 연결
                            try {
                                global.subscribeList[global.work.workId] = talkEvent.workSubscribe();
                            } catch (e) {
                            }


                            resolve();
                            /* 전체 로딩 완료시 상태 변경(
                                다른탭에서 구독 해제 메시지 방지용
                                위 설정 빠르게 처리 될때 대비 2초 뒤에 상태 변경
                            ) */

                            setTimeout(() => {
                                global.init = true;
                            }, 1500)

                        })

                        const open = () => {
                            $root.style.display = 'block';
                        }

                        // 모든 설정 정의 된후 버튼 활성화
                        setTimeout(open, 1000)

                        // 웹페이지 notication 설정
                        const globalOptions = {
                            position: 'top-right',
                            labels: {
                                alert: ''
                            }
                        }

                        global.notifier = new AWN(globalOptions);
                    }).catch(() => {
                    });
                } else {
                    console.log('유지보수자  접근 불가')
                    reject();
                }
            }

            setInterval(this.checker, 1000)
        })

    }

    // 운영 배포시 삭제
    getGlobal() {
        return global;
    }


    async #htmlInjection() {
        const docReady = (fn) => {
            // see if DOM is already available
            if (global.shadowRoot.readyState === 'loading') {
                global.shadowRoot.addEventListener('DOMContentLoaded', fn);
            } else {
                setTimeout(fn, 1);
            }
        };

        const errorPage = m('div', {
            class: 'server-error cus-hide'
        }, [
            m('div', {class: 'server-error-wrapper'}, [
                m('div', {class: 'server-error-body'}, [
                    m('p', '서버 오류로 인하여 중단 되었어요.'),
                    m('p', '유지보수 담당자에게 연락주세요.')
                ])
            ])
        ]);

        const socketErrorPage = m('div', {
            class: 'socket-error cus-hide'
        }, [
            m('div', {class: 'server-error-wrapper'}, [
                m('div', {class: 'server-error-body'}, [
                    m('p', '이런, 오류가 발생했어요.'),
                    m('p', '아래 재시작버튼을 눌러 다시 시작해주세요.'),
                    m('button', {class: 'btn btn-primary', id: 'socket-reset-btn'}, '재시작')
                ])
            ])
        ]);

        const notificationPermission = m('div', {
            id: 'noti-permission-card',
            class: 'card mt-1',
            style: 'background-color:var(--falcon-low-purple-hover) !important; color:white;'
        }, [
            m('div', {class: 'card-body'}, [
                m('div', {id: 'intro-title'}, [
                    m('i', {
                        class: "bi bi-bell-fill",
                        style: "font-size:1.1em;padding-right:10px;"
                    }),
                    m('span', {class: 'fw-bold'}, '브라우저 알림을 받아보세요!'),
                    m('button', {class: 'btn btn-sm btn-primary', id: 'noti-permission-btn'}, '사용하기')
                ])
            ])
        ])

        const main = m('div', {
            class: 'tab-pane fade cus-show active',
            id: 'intro',
            role: "tabpanel",
            style: 'padding: 10px 13px 10px 13px!important;',
            'aria-labelledby': "intro-tab"
        }, [
            Notification.permission === 'default' ? notificationPermission : '',
            m('div', {class: 'card mt-1'}, [
                m('div', {class: 'card-body'}, [
                    m('div', {id: 'intro-title'}, [
                        m('span', {id: 'intro-user'}),
                        m('span', '님'),
                        m('br'),
                        m('span', '궁금한 점을 질문해주세요.'),
                        m('br'),
                        m('span', {id: 'intro-work'}),
                        m('span', ' 관련 모든 문의를 지원합니다.'),
                        m('br'),
                        m('span', '질문, 요청사항 아래 문의하기를 눌러주세요.')
                    ]),
                    m('div', {class: "pt-3 pb-1", style: "display:flex; margin:0px auto; justify-content: center"}, [
                        m('button', {
                            type: "button",
                            id: "chat-inquiry",
                            class: "btn form-control",
                        }, [
                            m('i', {
                                class: "bi bi-send-fill",
                                style: "font-size:1.1em; padding-right:5px;border-radius:20px;"
                            }),
                            m('span', '문의하기')
                        ]),
                    ]),
                    m('div', {id: 'intro-online'}, '')

                ])
            ]),
            m('div', {class: 'card mt-4'}, [
                m('div', {class: 'card-header pb-0'}, [
                    m('h5-6', {class: 'fw-bold'}, '자주 찾는 질문')
                ]),
                m('div', {class: "card-body", id: "question"})
            ]),
            m('div', {class: 'card mt-4'}, [
                m('div', {class: "card-body"}, [
                    m('div', {
                        id: "manual-play",
                        class: "carousel slide carousel-fade",
                        'data-bs-ride': "carousel",
                        style: 'min-height:100px;'
                    }, [
                        m('div', {class: 'carousel-inner'}, [])
                    ])
                ])
            ])
        ])

        const chat = m('div', {
            class: "tab-pane fade",
            id: "chat",
            style: 'padding: 0px !important; ',
            role: "tabpanel",
            'aria-labelledby': "chat-tab"
        }, [
            m('div', {class: "card card-chat overflow-hidden", style: "height: 580px;"}, [
                m('div', {class: "card-body d-flex p-0 h-100"}, [
                    m('div', {class: "chat-sidebar", style: "left: 0px;"}, [
                        m('div', {class: "contacts-list scrollbar-overlay"}, [
                            m('div', {
                                id: "chat-list",
                                class: "nav nav-tabs border-0 flex-column",
                                role: "tablist",
                                'aria-orientation': "vertical"
                            })
                        ])
                    ]),
                    m('div', {class: 'tab-content card-chat-content'}, [
                        m('div', {
                            class: "tab-pane card-chat-pane",
                            id: "chat-0",
                            role: "tabpanel",
                            'aria-labelledby': "chat-link-0",
                            style: 'display:block;'
                        }, [
                            m('div', {class: "chat-content-header"}, [
                                m('div', {id: "chat-content-header-main", class: "row flex-between-center"}, [
                                    m('div', {class: 'col-8 col-sm-8 d-flex align-items-center'}, [
                                        m('button', {class: "pe-3 text-700 contacts-list-show bg-transparent", type: "button"}, [
                                            m('i', {class: "bi bi-chevron-left bi-color-grey"})
                                        ]),
                                        m('div', {class: "min-w-0"}, [
                                            m('h5', {class: 'mb-0 text-truncate fs-9', id: 'work-nm'}),
                                            m('div', {class: "fs-10 text-400 status-online", id: "work-sm-nm"})
                                        ])
                                    ]),
                                    m('div', {class: "col-4 col-sm-4 d-flex justify-content-end"}, [
                                        m('i', {
                                            id: "chat-option",
                                            class: "bi bi-three-dots-vertical bi-color-grey dropdown-toggle",
                                            style: "font-size:1.6em",
                                            'data-toggle': 'dropdown',
                                            'aria-haspopup': 'true',
                                            'aria-expanded': 'false'
                                        }),
                                        m('div', {
                                            class: 'dropdown-menu chat-option-menu',
                                            'aria-labelledby': '#chat-option'
                                        }, [
                                            m('div', {id: 'chat-content-search', class: 'dropdown-item'}, '검색'),
                                            m('div', {id: 'chat-content-font', class: 'dropdown-item'}, '설정'),
                                        ])
                                    ]),

                                    // m('div', {class: "col-4 col-sm-4 d-flex justify-content-end"}, [
                                    //     m('i', {
                                    //         id: "chat-content-search",
                                    //         class: "bi bi-search bi-color-grey",
                                    //         style: "font-size:1.6em"
                                    //     })
                                    // ])
                                ]),
                                m('div', {id: "chat-content-header-sub", class: "row flex-between-center cus-hide"}, [
                                    m('div', {class: 'input-group'}, [
                                        m('div', {id: 'chat-search-tot', "data-tot": "0/0"}),
                                        m('input', {
                                            type: "text",
                                            id: "chat-search-text",
                                            placeholder: '채팅 검색',
                                            'aria-label': "search content",
                                        }),
                                        m('div', {
                                            class: 'input-group-divider left'
                                        }),
                                        m('button', {
                                            class: "btn btn-sm chat-file-upload shadow-none",
                                            type: "button"
                                        }, [
                                            m('i', {
                                                id: 'chat-search-prev',
                                                class: 'bi bi-chevron-up bi-color-grey'
                                            }),
                                        ]),
                                        m('button', {
                                            class: "btn btn-sm chat-file-upload shadow-none",
                                            type: "button",
                                        }, [
                                            m('i', {
                                                id: 'chat-search-next',
                                                class: 'bi bi-chevron-down bi-color-grey'
                                            }),
                                        ]),
                                    ])
                                ])
                            ]),
                            m('div', {class: 'chat-content-body'}, [
                                m('div', {id: "chat-content", class: "chat-content-scroll-area scrollbar-overlay"})
                            ])
                        ]),
                        m('div', {class: 'message-preview cus-hide'}, [
                            m('div', {class: 'preview-wrap d-flex justify-content-between'}, [
                                m('div', {class: 'msg'}, ''),
                                m('i', {class: 'bottom-scroll-icon bi bi-arrow-down-circle-fill bi-color-white'})
                            ]),

                        ]),
                        m('form', {class: 'chat-editor-area'}, [
                            m('div', {class: 'input-group'}, [
                                m('button', {
                                    class: "btn btn-sm chat-file-upload shadow-none",
                                    id: "chat-upload-btn",
                                    type: "button",
                                    style: "padding-left:10px;padding-right:0px;"
                                }, [
                                    m('i', {class: "bi bi-paperclip bi-color-grey"})
                                ]),
                                m('div', {
                                    class: 'input-group-divider right'
                                }),
                                m('div', {
                                    class: "chat-editor outline-none",
                                    contenteditable: "true",
                                    placeholder: "메시지 작성 (ctrl+엔터 줄바꿈)"
                                }),
                                m('div', {
                                    class: 'input-group-divider left'
                                }),
                                m('button', {
                                    class: "btn btn-sm btn-send shadow-none",
                                    type: "button",
                                    style: "padding-left:0px;padding-right:0px;"
                                }, [
                                    m('i', {class: 'bi bi-send bi-color-grey'})
                                ]),
                            ]),
                            // m('button', {
                            //     class: "btn btn-sm chat-file-upload shadow-none",
                            //     id: "chat-upload-btn",
                            //     type: "button",
                            //     style: "padding-right:10px;"
                            // }, [
                            //     m('i', {class: "bi bi-paperclip bi-color-grey"})
                            // ]),
                            // m('div', {
                            //     class: "chat-editor outline-none",
                            //     contenteditable: "true",
                            //     placeholder: "메시지 작성 (ctrl+엔터 줄바꿈)"
                            // }),
                            // m('button', {
                            //     class: "btn btn-sm btn-send shadow-none",
                            //     type: "button",
                            //     style: "padding-left:10px;"
                            // }, [
                            //     m('i', {class: 'bi bi-send bi-color-grey'})
                            // ]),
                            m('input', {
                                class: "d-none",
                                type: "file",
                                id: "chat-file-upload",
                                multiple: "multiple",
                                accept: 'image/*, .xls, .xlsx, .doc, .docx, .hwp, .pdf, .txt, .pdf, .ppt, .zip, .egg'
                            }),
                        ])
                    ]),
                ])
            ])
        ])


        const allSearchEmpty = m('div', {style: 'font-size:var(--chat-content-font-size); text-align:center;'}, '조회된 내용이 없어요');

        const search = m('div', {
            class: "tab-pane fade ",
            id: "search",
            role: "tabpanel",
            style: 'padding: 10px 13px 10px 13px !important;',
            'aria-labelledby': "search-tab"
        }, [
            m('div', {class: 'card mt-1'}, [
                m('div', {class: 'card-body'}, [
                    m('div', {class: 'row justify-content-between'}, [
                        m('h5-6', {
                            class: 'form-label h6 col-5 search-label fw-bold',
                            for: 'chat-all-search-text'
                        }, '통합검색'),
                        m('div', {class: 'col-7 search'}, [
                            m('input', {
                                id: 'chat-all-search-text',
                                type: "text",
                                class: "form-control bg-white search-control",
                                placeholder: "전체 채팅 검색"
                            }),
                        ])
                    ]),
                    m('div', {
                        class: 'scrollbar-overlay mt-3',
                        id: 'chat-all-search-list',
                        style: 'min-height:30px; max-height: 150px;'
                    }, [
                        allSearchEmpty
                    ])
                ])
            ]),
            m('div', {class: 'card mt-4'}, [
                m('div', {class: 'card-body'}, [
                    m('div', {class: 'row justify-content-between', style: 'margin-bottom:10px;'}, [
                        m('h5-6', {class: 'form-label h6 col-5 search-label fw-bold', for: 'manual-doc-text'}, '매뉴얼'),
                        m('div', {class: 'col-7 search'}, [
                            m('input', {
                                id: 'manual-doc-text',
                                type: "text",
                                class: "form-control bg-white search-control",
                                placeholder: "매뉴얼 검색"
                            }),
                        ])
                    ]),
                    m('div', {class: 'row justify-content-start manual-header'}, [
                        m('div', {class: 'col-7 p-0'}, '파일명'),
                        m('div', {class: 'col-2 p-0 text-sm-end'}, '버전'),
                        m('div', {class: 'col-3 p-0 text-sm-end'}, '다운로드')
                    ]),
                    m('div', {
                        class: 'scrollbar-overlay mt-2',
                        id: 'manual-doc-body',
                        style: 'min-height:100px; max-height: 170px;'
                    })
                ])
            ]),
            m('div', {class: 'card mt-4'}, [
                m('div', {class: 'card-header pb-0'}, [
                    m('div', {class: 'row justify-content-between'}, [
                        m('h5-6', {
                            class: 'form-label h6 col-5 search-label fw-bold',
                            for: 'manual-video-text'
                        }, '동영상 매뉴얼'),
                        m('div', {class: 'col-7 search'}, [
                            m('input', {
                                id: 'manual-video-text',
                                type: "text",
                                class: "form-control bg-white search-control",
                                placeholder: "동영상 검색"
                            }),
                        ])
                    ]),
                ]),
                m('div', {class: 'card-body'}, [
                    m('div', {
                        class: 'scrollbar-overlay cus-show',
                        id: 'manual-video-body',
                        style: 'min-height:170px; max-height: 210px;'
                    }),
                    m('div', {
                        id: 'manual-video-play',
                        class: 'cus-hide',
                        style: 'min-height:130px; position:absolute; left:0px; top:50px;'
                    }, [
                        m('video', {id: 'manual-video', controls: true, autoplay: true}, [
                            /* url 재정의 필요 */
                            m('source', {'src': ``})
                        ]),
                        m('div', {id: 'manual-video-back'}, [
                            m('i', {class: 'bi bi-arrow-left-short cursor-pointer'})
                        ])
                    ])
                ])
            ]),
        ])

        const nav = m('nav', {
            class: "navbar chat-navbar navbar-light navbar-expand fixed-bottom shadow",
            style: "background-color:var(--falcon-low-purple); border-top-right-radius: 0px; border-top-left-radius: 0px;"
        }, [
            m('ul', {class: "nav nav-justified w-100", id: "myTab", role: "tablist"}, [
                m('li', {class: "nav-item active", role: "presentation"}, [
                    m('button', {
                        class: "nav-link active",
                        id: "intro-tab",
                        'data-bs-toggle': "tab",
                        'data-bs-target': "#intro",
                        type: "button",
                        role: "tab",
                        'aria-controls': "intro",
                        'aria-selected': "true",
                        style: 'position:relative; padding-top:0;'
                    }, [
                        m('i', {class: 'bi bi-house-door bi-md'}),
                        m('label', {class: 'nav-item-label'}, '홈')
                    ])
                ]),
                m('li', {class: "nav-item", role: "presentation"}, [
                    m('button', {
                        class: "nav-link",
                        id: "chat-tab",
                        'data-bs-toggle': "tab",
                        'data-bs-target': "#chat",
                        type: "button",
                        role: "tab",
                        'aria-controls': "chat",
                        'aria-selected': "false",
                        style: 'position:relative; padding-top:0;'
                    }, [
                        m('i', {class: 'bi bi-chat-dots bi-md'}),
                        m('label', {class: 'nav-item-label'}, '채팅')
                    ])
                ]),
                m('li', {class: "nav-item", role: "presentation"}, [
                    m('button', {
                        class: "nav-link",
                        id: "search-tab",
                        'data-bs-toggle': "tab",
                        'data-bs-target': "#search",
                        type: "button",
                        role: "tab",
                        'aria-controls': "chat",
                        'aria-selected': "false",
                        style: 'position:relative; padding-top:0;'
                    }, [
                        m('i', {class: 'bi bi-book bi-md'}),
                        m('label', {class: 'nav-item-label'}, '메뉴얼')
                    ])
                ]),
            ])
        ])
        const modal = m('div', {
            class: "modal fade",
            id: "imageModal",
            'data-bs-keyboard': "false",
            tabindex: "-1",
            "aria-labelledby": "staticBackdropLabel",
            "aria-hidden": "false"
        }, [
            m('div', {
                class: "modal-dialog modal-dialog-centered modal-xxl",
                style: 'margin:0px auto;justify-content:center;'
            }, [
                m('div', {class: "modal-content", style: 'border:0px; width:auto; margin-left:5%; margin-right:5%;'}, [
                    m('div', {class: "modal-body"}, [])
                ])
            ]),
        ])

        const info = m('div', {class: 'chat-confirm-wrapper chat-delete-confirm-wrapper cus-hide'}, [
            m('div', {class: 'chat-confirm-fixed'}, [
                m('div', {class: 'card'}, [
                    m('div', {class: 'card-body', style: 'text-align:center;'}, [
                        m('p', {class: 'chat-confirm-title'}, '대화를 삭제하시면 더이상 내용(진행상태) 확인을 할 수 없어요.\n 그래도 삭제 할까요?'),
                        m('button', {class: 'btn btn-sm chat-confirm-btn chat-delete-btn'}, '대화 삭제하기')
                    ])
                ]),
                m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
            ])
        ])

        const upload = m('div', {class: 'chat-confirm-wrapper chat-upload-confirm-wrapper cus-hide'}, [
            m('div', {class: 'chat-confirm-fixed'}, [
                m('div', {class: 'card'}, [
                    m('div', {class: 'card-body', style: 'text-align:center;'}, [
                        m('p', {class: 'chat-confirm-title'}, '이미지 또는 파일을 첨부해 주세요.'),
                        m('div', {class: 'p-1'}, [
                            m('button', {class: 'btn btn-sm chat-confirm-btn chat-file-upload-btn'}, '파일 첨부하기'),
                        ]),
                    ])
                ]),
                m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
            ])
        ])

        const paste = m('div', {class: 'chat-confirm-wrapper chat-clipboard-confirm-wrapper cus-hide'}, [
            m('div', {class: 'chat-confirm-fixed'}, [
                m('div', {class: 'card'}, [
                    m('div', {class: 'card-body', style: 'text-align:center;'}, [
                        m('div', {class: ''}, [
                            m('img', {src: '', class: 'chat-clipboard-img'})
                        ]),
                        m('p', {class: 'chat-confirm-title pt-2'}, '클립보드 이미지를 업로드 할까요?'),
                        m('div', {class: 'p-1'}, [
                            m('button', {class: 'btn btn-sm chat-confirm-btn chat-clipboard-btn'}, '업로드'),
                        ]),
                    ])
                ]),
                m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
            ])
        ])

        const fontResize = m('div', {class: 'chat-confirm-wrapper chat-font-confirm-wrapper cus-hide'}, [
            m('div', {class: 'chat-confirm-fixed', style: 'bottom: 330px !important;'}, [
                m('div', {class: 'card'}, [
                    m('div', {class: 'card-body', style: 'text-align:center;'}, [
                        m('div', {class: 'resize-body'}, [
                            m('div', '대화방의 글자 크기가 아래와 같이 변경되요.'),
                            m('div', {class: 'pb-3'}, '슬라이드를 움직여 크기를 조절해보세요.'),
                            m('div', {
                                class: 'pb-3 sample-text chat-content-custom-font-size',
                                'style': `font-size: ${Common.getCookie('fontSize')}px;`
                            }, '안녕하세요.'),
                            m('input', {
                                type: 'range',
                                class: 'form-range',
                                min: '14',
                                max: '26',
                                step: '1',
                                value: `${Common.getCookie('fontSize') ?? 14}`,
                                id: 'resize-font'
                            })
                        ]),
                        m('div', {class: 'p-1'}, [
                            m('button', {class: 'btn btn-sm chat-confirm-btn chat-font-btn'}, '저장'),
                        ]),
                    ])
                ]),
                m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
            ])
        ])

        const rating = m('div', {class: 'chat-confirm-wrapper chat-rating-confirm-wrapper cus-hide'}, [
            m('div', {class: 'chat-confirm-fixed'}, [
                m('div', {class: 'card'}, [
                    m('div', {class: 'card-body', style: 'text-align:center;'}, [
                        m('p', {class: 'text-pre-wrap'}, '상담이 종료되었어요.\n' +
                            '만약 요청주신 작업이 있으시다면\n' +
                            '작업처리 후 알려드릴 예정이에요.\n' +
                            '이번 상담이 만족스러우셨나요?\n' +
                            '(최소 10점, 최대 100점까지 클릭)'),
                        m('div', {class: "star-rate", "data-val": "5", 'data-max': '5'}, [
                            m('span', {'class': 'cont m-1l'}, [
                                m('span', {'class': 'ctrl'}),
                                m('i', {'class': 'bi bi-star-fill'}),
                                m('i', {'class': 'bi bi-star-fill'}),
                                m('i', {'class': 'bi bi-star-fill'}),
                                m('i', {'class': 'bi bi-star-fill'}),
                                m('i', {'class': 'bi bi-star-fill'})
                            ]),

                        ]),
                        m('p', {class: 'text-pre-wrap'}, '개선점이나 칭찬할 부분이 있으신가요?\n' +
                            '아래에 내용을 작성해주세요.'),
                        m('div', [
                            m('textarea', {class: 'form-control', id: 'review'})
                        ]),
                        m('div', {class: 'pt-3'}, [
                            m('button', {class: 'btn btn-sm chat-confirm-btn chat-rating-btn'}, '저장'),
                        ]),
                    ])
                ]),
                m('div', {class: 'chat-confirm-cancel cursor-pointer'}, 'x')
            ])
        ])

        const fullscreen = m('div', {id: 'fullscreen-container', class: 'cus-hide'});

        const detail = m('div', {id: 'detail-container', class: 'cus-hide'}, [
            m('iframe', {frameborder:0, align:'center', src:''}),
            m('div', {id:'detail-close'}, [
                m('i', {class: "bi bi-x-lg bi-color-grey",}),
            ])
        ]);


        const loading = m('div', {class: 'loading-wrap cus-hide'}, [
            m('div', {
                class: 'fade',
                style: 'width: 100%;height: 100%;position: absolute;top: 0;left: 0;background-color: black;z-index: 1111111;opacity: 0.4;'
            }),
            m('div', {
                class: 'loading-indicator',
                style: 'position: absolute; width: 100%;height: 100%;z-index: 10;top: 45%;left: 45%;'
            }, [
                m('span', {
                    class: "spinner-border",
                    role: "status",
                    'aria-hidden': "true",
                    style: "width: 3rem; height: 3rem;"
                }),
            ])
        ])


        const floatingBtnStyle = `cursor:grab;${global.option.vertical === 'bottom' ? 'bottom:' + global.option.button.offsetY + 'px;' : 'top:' + global.option.button.offsetY + 'px;'} ${global.option.horizontal === 'right' ? 'right:' + global.option.button.offsetX + 'px;' : 'left:' + global.option.button.offsetX + 'px;'}`
        const floatingBtn = m('div', {class: 'chat-floating-btn', style: floatingBtnStyle}, [
            m('i', {class: 'bi-msg-icon bi-color-low-purple'}, [
                m('span', {
                    class: 'position-absolute top-8-px start-100 translate-middle badge unread rounded-pill bg-danger cus-hide',
                    style: '--falcon-badge-font-size: 0.57em;'
                }, [
                    m.trust(),
                    m('span', {class: 'visually-hidden'}, '미확인 메시지')
                ])
            ])
        ])

        const css = [
            m('link', {
                rel: 'stylesheet',
                href: 'http://talk.kospo.co.kr:3000/static/bundle/bootstrap-5.1.3/css/bootstrap.min.css'
            }),
            m('link', {
                rel: 'stylesheet',
                href: 'http://talk.kospo.co.kr:3000/static/bundle/bootstrap-icon-1.11.3/bootstrap-icons.css'
            }),
            m('link', {
                rel: 'stylesheet',
                href: 'http://talk.kospo.co.kr:3000/static/bundle/simplebar-6.2.7/simplebar.min.css'
            }),
            m('link', {
                rel: 'stylesheet',
                href: 'http://talk.kospo.co.kr:3000/static/bundle/awesome-notifications-3.1.1/style.css'
            }),
            m('link', {rel: 'stylesheet', href: 'http://talk.kospo.co.kr:3000/static/css/theme.css'}),
            m('link', {rel: 'stylesheet', href: 'http://talk.kospo.co.kr:3000/static/css/imp.css'}),
        ]

        let floatingBodyStyle = `${global.option.vertical === 'bottom' ? 'bottom:' + global.option.container.offsetY + 'px;' : 'top:' + global.option.container.offsetY + 'px;'} right:${global.option.container.offsetX}px`
        if (global.option.horizontal === 'left') {
            floatingBodyStyle = `bottom:${global.option.container.offsetY}px; left:${global.option.container.offsetX}px`
        }

        const floatingBody = m('div', {class: 'chat-floating cus-hide', style: floatingBodyStyle}, [
            m('div', {class: 'tab-content chat-content', id: 'chat-tab-content'}, [
                main,
                chat,
                search,
                info,
                upload,
                paste,
                fontResize,
                rating,
                m('iframe', {name: '_download_', style: 'display:none; visibility:hidden;'})
            ]),
            nav,
            loading,
            errorPage,
            socketErrorPage
        ])


        const chatArea = document.querySelector('#chat-area');
        global.shadowRoot = chatArea.attachShadow({mode: 'closed'});
        const allHtml = m('body', [m('head', css), floatingBtn, floatingBody, modal, fullscreen, detail]);
        m.render(global.shadowRoot, allHtml)


        /*아이콘 이미지 색상 변경*/
        if (global.option.button.color !== null) document.documentElement.style.setProperty('--chat-main-icon', global.option.button.color)
        if (global.option.button.hoverColor !== null) document.documentElement.style.setProperty('--chat-main-icon-hover', global.option.button.hoverColor)
        if (global.option.container.offsetY !== null) document.documentElement.style.setProperty('--chat-confirm-fixed-height', `${global.option.container.offsetY + 70}px`)
        /*전체 색상 변경*/
        if (global.option.container.color !== null) document.documentElement.style.setProperty('--falcon-low-purple', global.option.container.color)
        if (global.option.container.hoverColor !== null) document.documentElement.style.setProperty('--falcon-low-purple-hover', global.option.container.hoverColor)
        if (global.option.container.activeColor !== null) document.documentElement.style.setProperty('--falcon-purple', global.option.container.activeColor)

        /*쿠키에 설정된 채팅방 폰트 사이즈 변경*/
        const getContentFontSize = Common.getCookie('fontSize') ?? 14;
        document.documentElement.style.setProperty('--chat-content-custom-font-size', `${getContentFontSize}px`)

        /*톡방 메시지 엘리먼트 변수*/
        global.element.chatSidebar = global.shadowRoot.querySelector('.chat-sidebar');
        global.element.chatEditor = global.shadowRoot.querySelector('.chat-editor');
        global.element.chatEditorArea = global.shadowRoot.querySelector('.chat-editor-area')
        global.element.btnSend = global.shadowRoot.querySelector('.btn-send');
        global.element.currentChatArea = global.shadowRoot.querySelector('.chat-content-scroll-area');

        /*대화방 내용 검색 기능 엘리먼트 변수*/

        const $contentSearch = global.shadowRoot.querySelector('#chat-content-search');
        const $contentSearchText = global.shadowRoot.querySelector('#chat-search-text');
        const $contentSearchPrev = global.shadowRoot.querySelector('#chat-search-prev');
        const $contentSearchNext = global.shadowRoot.querySelector('#chat-search-next');
        const $contentSearchSub = global.shadowRoot.querySelector('#chat-content-header-sub');
        const $contentSearchTot = global.shadowRoot.querySelector('#chat-search-tot')

        /*메뉴 탭*/
        const $myTab = global.shadowRoot.querySelector('#myTab');

        /*알림 권한 버튼*/
        const $notiPermission = global.shadowRoot.querySelector('#noti-permission-btn')

        /*채팅 활성화 버튼*/
        const $chatFloatingBtn = global.shadowRoot.querySelector('.chat-floating-btn')
        const $chatScrollDownBtn = global.shadowRoot.querySelector('.bottom-scroll-icon');
        /* 문의 하기 버튼 */
        const $chatInquiry = global.shadowRoot.querySelector('#chat-inquiry')
        const $manualPlaying = global.shadowRoot.querySelector('#manual-play');
        let $carousel = null;

        /* 파일 관련 엘리먼트 */
        const $chatUploadBtn = global.shadowRoot.querySelector('#chat-upload-btn');
        const $chatFileUploadBtn = global.shadowRoot.querySelector('.chat-file-upload-btn')
        const $chatFileUpload = global.shadowRoot.querySelector('#chat-file-upload')

        /* 클립보드 관련 엘리먼트 */
        const $chatClipboardBtn = global.shadowRoot.querySelector('.chat-clipboard-btn');

        /* 폰트 사이즈 수정 엘리먼트 */

        const $chatContentFont = global.shadowRoot.querySelector('#chat-content-font');
        const $resizeFont = global.shadowRoot.querySelector('#resize-font');
        const $resizeSample = global.shadowRoot.querySelector('.sample-text');
        const $chatFontBtn = global.shadowRoot.querySelector('.chat-font-btn');

        /*평가*/
        const $chatRating = global.shadowRoot.querySelector('.star-rate');
        const $chatRatingCtrl = $chatRating.querySelector('.star-rate span.ctrl');
        const $chatRatingBtn = global.shadowRoot.querySelector('.chat-rating-btn');
        const $chatRatingReview = global.shadowRoot.querySelector('#review');

        /*세번째 탭 전체 검색 엘리먼트*/
        const $chatAllSearchText = global.shadowRoot.querySelector('#chat-all-search-text');
        const $chatAllSearchList = global.shadowRoot.querySelector('#chat-all-search-list');

        /*세번째 탭 매뉴얼 검색*/
        const $manualDocText = global.shadowRoot.querySelector('#manual-doc-text');
        const $manualDocBody = global.shadowRoot.querySelector('#manual-doc-body');

        /*세번째 탭 동영상 매뉴얼 검색*/
        const $manualVideoText = global.shadowRoot.querySelector('#manual-video-text');
        const $manualVideoBody = global.shadowRoot.querySelector('#manual-video-body');

        /*채팅방내 엘리먼트*/
        // 설정 드랍다운
        let $contentDropdownOption;
        const $contentOption = global.shadowRoot.querySelector('#chat-option');
        const $contentOptionShow = global.shadowRoot.querySelector('.bi-three-dots-vertical');

        /* 자세히 보기 설정 */
        const $detailClose = global.shadowRoot.querySelector('#detail-close');

        /*첨부파일 변수 정의*/
        let $files = [];

        /*타이핑 여부*/
        let $typedFlag = false;

        /*내용 검색 관련 변수*/
        let lines = [];
        let lines_idx = 0

        if ($notiPermission) {
            $notiPermission.addEventListener('click', async function () {
                const permission = await requestNotificationPermission();
                if (permission === 'granted') {
                    const notiCard = global.shadowRoot.querySelector('#noti-permission-card')
                    notiCard.remove();
                    allHtml.children[2].children[0].children[0].children.splice(0, 1)
                }
            })
        }


        /*bootstrap 수동 이벤트 설정*/
        /*메뉴 탭 선택시 색상*/
        $myTab.querySelectorAll('button[data-bs-toggle="tab"]').forEach(function (el) {
            el.addEventListener('click', function (e) {
                const tabTrigger = new Tab(e.currentTarget);
                e.preventDefault();

                if (!e.currentTarget.classList.contains('active')) {
                    tabTrigger.show();
                    $myTab.querySelectorAll('button[data-bs-toggle="tab"]').forEach(function (li) {
                        li.classList.remove('active');
                        li.parentNode.classList.remove('active');
                    })
                    e.currentTarget.classList.add('active');
                    e.currentTarget.parentNode.classList.add('active')
                    /*현재 톡방 진입되어 있을시 뒤로가기 처리*/
                    if (e.currentTarget.getAttribute("id") !== 'chat-tab') {
                        const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
                        chatBack.click();

                        /*검색 닫기*/
                        global.searchClose();
                    }

                    /*홈 화면 매뉴얼 동영상 제어 */
                    const activePlay = $manualPlaying.querySelector('.active');
                    if (activePlay) {
                        const play = activePlay.querySelector("video")
                        if (e.currentTarget.dataset.bsTarget === '#intro') {
                            if (play) play.play()
                            $carousel.cycle();
                        } else {
                            if (play) play.pause()
                            $carousel.pause();
                        }
                    }
                }
            })
        })

        // 새로고침 이벤트 (untyped 메시지 전송, 로컬스토리지 제거, 쿠키 정보 삭제)
        window.addEventListener('beforeunload', function (e) {
            unload()
        });

        function unload() {
            console.log('beforeunload')

            /*현재 탭이 소켓 연결 되어 있으면 다른탭으로 소켓 전달*/
            if (Common.isMaster()) {
                HubEvent.sendSetMaster(global.talkParams({
                    type: 'SEND_SET_MASTER'
                }))
            }


            /* 서버 서비스워커 연결 해제*/
            HubEvent.close({
                type: 'TAB_CLOSE',
                tabId: global.tabId,
                url: global.apiUrl,
                sabun: global.user.sabun,
                channelSabun: global.user.sabun,
                site: global.currentUrl
            });


            /* 로컬 스토리지에 저장 되어 있는 탭정보 제거 */
            const talkId = localStorage.getItem(global.tabId);
            const workId = localStorage.getItem('workId');
            localStorage.removeItem(global.tabId)
            localStorage.removeItem('workId')

            try {
                /* 메시지 작성 내용이 없을시 해당 톡방 제거  */
                const currentTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
                if (currentTalk.lastMessage === null || currentTalk.lastMessage === '') {
                    talkEvent.leave(global.talkParams({
                        type: "LEAVE",
                        talkId: talkId,
                        workId: global.work.workId,
                    }))
                }

                if(talkId !== null || talkId !== '') {
                    /* 작성중인 메시지가 있을시 타이핑 메시지 해제 */
                    talkEvent.send(global.talkParams({
                        type: "UNTYPED",
                        talkId: talkId,
                        workId: workId
                    }))
                }

            } catch (e) {
            }


            talkEvent.allUnsubscribe()
            global.hub.stop();
        }


        // 톡방 뒤로가기 클릭시 이벤트
        const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
        chatBack.addEventListener('click', function () {
            const talkId = localStorage.getItem(global.tabId);
            // const workId = localStorage.getItem('workId');
            // talkEvent.send(global.talkParams({
            //     type: "UNTYPED",
            //     talkId: talkId,
            //     workId: workId
            // }))
            // 톡방 옵션 자동 닫기
            if ($contentDropdownOption) $contentDropdownOption.hide();
            // 채팅목록 하이라이트 자동 제거

            /*
            *메시지 작성 내용이 없을시 해당 톡방 제거
            *이미 삭제된 톡방 예외 처리
            */
            const currentTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
            if(currentTalk) {
                try {
                    if (currentTalk.lastMessage === null || currentTalk.lastMessage === '') {
                        talkEvent.leave(global.talkParams({
                            type: "LEAVE",
                            talkId: talkId,
                        }))
                    } else {
                        currentTalk.talkMessages.talks = currentTalk.talkMessages.talks.splice(currentTalk.talkMessages.talks.length - 30, currentTalk.talkMessages.talks.length)
                        talkEvent.talkHeaderChange('', '')
                        global.reset();
                    }
                } catch (e) {
                    currentTalk.talkMessages.talks = currentTalk.talkMessages.talks.splice(currentTalk.talkMessages.talks.length - 30, currentTalk.talkMessages.talks.length)
                    talkEvent.talkHeaderChange('', '')
                    global.reset();
                }
            }



            /* 접속한 톡방 색상 표시 */
            try {
                const prevRoom = global.shadowRoot.querySelector(`div[data-talk-id="${talkId}"]`)
                prevRoom.classList.add('bg-purple');
                setTimeout(() => {
                    prevRoom.classList.remove('bg-purple');
                }, 800)
            } catch (e) {
            }


            global.scrollMoreFlag = true;
            global.scrollObserveFlag = true;
        });

        // 오토 하이드 스크롤 정의
        const scrollbarSetting = () => {
            Array.prototype.forEach.call(global.shadowRoot.querySelectorAll('.scrollbar-overlay'), function (el) {
                return new SimpleBar(el, {
                    autoHide: true,
                    forceVisible: true
                });
            });

            new SimpleBar(global.shadowRoot.querySelector('.chat-floating'), {
                autoHide: true
            });
        };

        // 이미지 동영상 슬라이드 설정
        const carouselSetting = () => {
            $carousel = new Carousel($manualPlaying, {
                interval: 10000,
                wrap: true,
            });

            $manualPlaying.addEventListener('slide.bs.carousel', (e) => {
                const prevVideo = $manualPlaying.querySelectorAll('video')[e.from];
                if (prevVideo) {
                    prevVideo.pause();
                    prevVideo.currentTime = 0;
                }
                try {
                    const video = e.relatedTarget.querySelector('video')
                    video.play()
                } catch (e) {
                }
            })
        };


        // 채팅 내용 입력시 자동 하단 스크롤
        const contentResizeObserver = () => {
            const contentBody = global.shadowRoot.querySelector('.chat-content-body');
            const scrollbarVertical = contentBody.querySelector('.simplebar-vertical')
            // const scrollbar = scrollbarVertical.querySelector('.simplebar-scrollbar')
            const scrollBody = contentBody.querySelector('.simplebar-content')
            const resizeObserver = new ResizeObserver((entries) => {
                for (let entry of entries) {
                    if (entry.target.classList.contains('simplebar-content')) {
                        const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
                        if (global.scrollObserveFlag) {
                            contentSc.scrollTop = scrollBody.clientHeight - contentSc.offsetHeight + 10000;
                        }
                    }

                }
            });
            resizeObserver.observe(scrollBody);


            // 채팅 내용 스크롤 (채팅 내용 호출)
            contentBody.querySelector('.simplebar-content-wrapper').addEventListener('scroll', contentScrollEvent)

            async function contentScrollEvent(e) {
                const _contentScroll = e.currentTarget;
                const scrollBody = contentBody.querySelector('.simplebar-content')

                // 최종 스크롤 위치 저장
                global.oldScrollPosition = (_contentScroll.scrollHeight - _contentScroll.scrollTop)
                // 스크롤 활성화 되어 있는 상태에서 하단 높이가 100PX 보다 크면 옵저버 비황성화
                if ((scrollBody.clientHeight - _contentScroll.offsetHeight) - _contentScroll.scrollTop >= 400) {
                    global.scrollObserveFlag = false;
                }

                if (_contentScroll.scrollTop < 400 && global.scrollMoreFlag) {
                    // 다중 호출 방지용
                    global.scrollMoreFlag = false;


                    const talkId = localStorage.getItem(global.tabId);
                    if (talkId) {
                        const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];

                        // 메인탭 일시 메시지 호출
                        // 메인탭이 아닐시 메인탭으로 데이터 호출 하도록 통신
                        if (cacheTalk.talkMessages) {
                            if (cacheTalk.talkMessages.talks.length !== cacheTalk.talkMessages.total) {
                                cacheTalk.messageParams.start = cacheTalk.messageParams.start + cacheTalk.messageParams.row;
                                getMoreMessageLine(talkId).then((result) => {
                                    if (result === 'success') {
                                        global.scrollMoreFlag = true;
                                    } else if (result === 'last') {
                                        global.scrollMoreFlag = false;
                                    }
                                }).catch((e) => {
                                    global.scrollMoreFlag = false;
                                    cacheTalk.messageParams.start = cacheTalk.messageParams.start - cacheTalk.messageParams.row;
                                })
                            }
                        }
                    }
                }

                // 스크롤 비활성화 되어 있는 상태에서 하단 높이가 200PX 미만 이면 옵저버 활성화
                if (!global.scrollObserveFlag) {
                    if ((scrollBody.clientHeight - _contentScroll.offsetHeight) - _contentScroll.scrollTop < 400) {
                        console.log('스크롤 옵저버 활성화')
                        global.scrollObserveFlag = true;
                        global.shadowRoot.querySelector('.message-preview').classList.add('cus-hide');
                    }
                }
            }
        }

        // 채팅 버튼 클릭시
        $chatFloatingBtn.addEventListener('click', () => {
            const chatFloating = global.shadowRoot.querySelector('.chat-floating')
            const chatBadge = global.shadowRoot.querySelector('.unread.badge');
            const currentCarousel = global.shadowRoot.querySelector('.carousel-item.active');
            if (currentCarousel !== '' && currentCarousel !== null) {
                const currentVideo = currentCarousel.querySelector('video');
                if (chatFloating.classList.contains('cus-hide')) {
                    if (currentVideo) currentVideo.play();
                } else {
                    if (currentVideo) currentVideo.pause();
                }
            }
            if (chatFloating.classList.contains('cus-hide')) {
                chatFloating.classList.remove('cus-hide')
                chatFloating.classList.add('cus-show')
                $chatFloatingBtn.classList.add('active')
                $carousel.cycle()
            } else {
                $chatFloatingBtn.classList.remove('active')
                chatFloating.classList.remove('cus-show')
                chatFloating.classList.add('cus-hide')
                $carousel.pause();
            }
            if (chatBadge.innerText !== '0') chatBadge.classList.remove('cus-hide')

        })

        // 메시지 팝업창 스크롤 다운 버튼 클릭시 위치 조정
        $chatScrollDownBtn.addEventListener('click', function () {
            const contentBody = global.shadowRoot.querySelector('.chat-content-body');
            const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
            const scrollBody = contentBody.querySelector('.simplebar-content')
            contentSc.scrollTop = scrollBody.clientHeight - contentSc.offsetHeight

            global.shadowRoot.querySelector('.message-preview').classList.add('cus-hide');
            global.scrollObserveFlag = true;
        })


        /*문의 하기 이벤트 */
        $chatInquiry.addEventListener('click', function () {
            const talkId = talkEvent.generateUUID();
            // 키보드 숨김 해제
            global.element.chatEditorArea.classList.remove('cus-hide');
            global.element.chatEditor.focus()

            // 채팅 구독 메시지 보내기
            localStorage.setItem(global.tabId, talkId)
            localStorage.setItem('workId', global.work.workId)
            talkEvent.join(global.talkParams({
                type: 'JOIN',
                talkId: talkId,
                workId: global.work.workId,
                introOwner: 'your'
            }));
            talkEvent.messageShow()
        })


        // 메시지 전송 이벤트
        global.element.btnSend.addEventListener('click', function () {
            const talkId = localStorage.getItem(global.tabId);
            const workId = localStorage.getItem('workId');
            const workNm = localStorage.getItem('workNm');
            if(talkId === null || workId === null) {
                global.notifier.alert('통신 오류가 발생 했어요.<br/>새로고침 해주세요.')
                return;
            }
            // talkEvent.send(global.talkParams({
            //     type: "UNTYPED",
            //     talkId: talkId,
            //     workId: workId,
            //     workNm: workNm
            // }))
            const msg = global.element.chatEditor.innerText.trim();
            if (msg) {
                talkEvent.send(global.talkParams({
                    type: 'MESSAGE',
                    message: msg,
                    talkId: talkId,
                    workId: workId,
                    workNm: workNm
                }))

                global.checker.flag = true;
                global.checker.inDate = new Date();
            }
            // 채팅 input 초기화
            global.element.chatEditor.innerHTML = '';
            // 첨부파일 초기화
            $files = [];
            $typedFlag = false;
        })

        // 채팅 에디트 붙여넣기 이벤트
        global.element.chatEditor.addEventListener('paste', async function (e) {
            e.preventDefault();
            let isText = false;
            for (const item of Array.from(e.clipboardData.items)) {
                if (!item.type.includes('text')) {
                    global.clipboardData = item.getAsFile()
                    global.clipboardObjectUrl = URL.createObjectURL(global.clipboardData);
                    const clipboardConfirmWrap = global.shadowRoot.querySelector('.chat-clipboard-confirm-wrapper');
                    const clipboardImg = clipboardConfirmWrap.querySelector('img')
                    clipboardImg.setAttribute('src', global.clipboardObjectUrl);
                    clipboardConfirmWrap.classList.remove('cus-hide')

                } else {
                    isText = true;
                }
            }

            if (isText) {
                // 클립보드에서 텍스트 가져오기
                const clipboard = e.clipboardData || window.clipboardData;
                document.execCommand('insertText', false, clipboard.getData("Text").trim());
                // const textType = e.clipboardData.items[e.clipboardData.items.length - 1].type
                // if(textType === 'text/rtf') {
                //     const clipboard = e.clipboardData || window.clipboardData;
                //
                //     console.log(clipboard.getData("Text"))
                // } else {
                //     e.clipboardData.items[e.clipboardData.items.length - 1].getAsString(data => {
                //         // HTML 태그 제거
                //         const cleanText = data.replace(/<[^>]*>/g, '');
                //         document.execCommand('insertText', false, cleanText.trim());
                //     });
                // }

            }

        })


        // 채팅 에디트 컨트롤 + ENTER 이벤트
        let prevMessage = "";
        global.element.chatEditor.addEventListener('keyup', function (e) {
            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault()
                insertNewlineAtCursor();
            }

            function insertNewlineAtCursor() {
                document.execCommand('insertText', false, '\n');

                // 변경 이벤트 발생
                const event = new InputEvent('input', {
                    bubbles: true,
                    cancelable: true,
                });
                global.element.chatEditor.dispatchEvent(event);

                // 스크롤 조정
                global.element.chatEditor.scrollTop = global.element.chatEditor.scrollHeight;
            }

            const message = global.element.chatEditor.innerText

            if (message.trim() === '' && prevMessage !== message) {
                $typedFlag = false;
                const workId = localStorage.getItem('workId');
                const workNm = localStorage.getItem('workNm');
                const talkId = localStorage.getItem(global.tabId);
                global.queue.enqueue({
                    type: 'UNTYPED',
                    talkId: talkId,
                    workId: workId,
                    workNm: workNm
                })
                // talkEvent.send(global.talkParams({
                //     type: 'UNTYPED',
                //     talkId: talkId,
                //     workId: workId,
                //     workNm: workNm
                // }))
                /*contentededitable 빈값 일시 br 태그 제거*/
                global.element.chatEditor.innerHTML = global.element.chatEditor.innerHTML.replace('<br>', '');
            } else if (message.trim() !== '') {
                if (!$typedFlag) {
                    $typedFlag = true;
                    const workId = localStorage.getItem('workId');
                    const workNm = localStorage.getItem('workNm');
                    const talkId = localStorage.getItem(global.tabId);
                    global.queue.enqueue({
                        type: 'TYPED',
                        talkId: talkId,
                        workId: workId,
                        workNm: workNm
                    })
                    // talkEvent.send(global.talkParams({
                    //     type: 'TYPED',
                    //     talkId: talkId,
                    //     workId: workId,
                    //     workNm: workNm
                    // }))
                }
            }
            prevMessage = message

        })

        //채팅 에디트 ENTER 이벤트
        global.element.chatEditor.addEventListener('keydown', function (e) {

            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
                e.preventDefault()
            } else if (e.key === 'Enter') {
                e.preventDefault();
                global.element.btnSend.click()
            }

        })

        /* 클립보드 이미지 업로드 이벤트 */
        $chatClipboardBtn.addEventListener('click', function (e) {
            const dataTransfer = new DataTransfer();
            dataTransfer.items.add(global.clipboardData);
            const files = dataTransfer.files;
            attachUpload(files).then(() => {
                global.clipboardData = null;
                URL.revokeObjectURL(global.clipboardObjectUrl)
                global.clipboardObjectUrl = null;
            })
            const clipboardConfirmWrap = global.shadowRoot.querySelector('.chat-clipboard-confirm-wrapper');
            clipboardConfirmWrap.classList.add('cus-hide')

        })

        // 채팅방 파일첨부 버튼 이벤트
        $chatUploadBtn.addEventListener('click', function (e) {
            const chatUploadConfirmWrapper = global.shadowRoot.querySelector('.chat-upload-confirm-wrapper')
            chatUploadConfirmWrapper.classList.remove('cus-hide');
        })

        // 채팅방 파일첨부 확인 이벤트
        $chatFileUploadBtn.addEventListener('click', function () {
            $chatFileUpload.click();
            const chatUploadConfirmWrapper = global.shadowRoot.querySelector('.chat-upload-confirm-wrapper')
            chatUploadConfirmWrapper.classList.add('cus-hide');
        })


        // 첨부파일 업로드 이벤트
        $chatFileUpload.addEventListener('change', async function (e) {
            const fileInput = e.currentTarget;
            let totSize = 0;
            let next = true;
            if (fileInput.files.length > 0) {
                Array.from(fileInput.files).forEach((f) => {
                    const currentSize = Math.floor(f.size / (1024*1024));
                    if(Math.ceil(currentSize / (1024*1024)) > 10) {
                        next = false;
                    }
                    totSize += currentSize;
                })

                if(totSize > 30) {
                    global.notifier.alert('첨부파일 사이즈는 전체 30MB를 초과 할수 없어요.')
                    return false;
                }
                if(next) {
                    attachUpload(fileInput.files)
                } else {
                    global.notifier.alert('파일 하나당 10MB를 초과 할수 없어요.')
                    return false;
                }
            }

        })

        // 톡방 설정 선택시 폰트 사이즈 변경 모달 활성화
        $chatContentFont.addEventListener('click', (e) => {
            $contentDropdownOption.hide();
            const chatFontConfirmWrapper = global.shadowRoot.querySelector('.chat-font-confirm-wrapper')
            chatFontConfirmWrapper.classList.remove('cus-hide');
        })

        // 폰트 사이즈 변경 마우스 이벤트
        $resizeFont.addEventListener('mousemove', (e) => {
            $resizeSample.style.fontSize = e.target.value + 'px';
        })

        // 폰트 사이즈 변경 저장시 캐시에 데이터 저장 모든 업무 공유용
        $chatFontBtn.addEventListener('click', () => {
            Common.setCookie("fontSize", $resizeFont.value);
            const chatFontConfirmWrapper = global.shadowRoot.querySelector('.chat-font-confirm-wrapper')
            chatFontConfirmWrapper.classList.add('cus-hide');
            // document.documentElement.style.setProperty('--chat-content-custom-font-size', `${$resizeFont.value}px`)
            global.registration.active.postMessage({type: 'FONT_CHANGE', size: $resizeFont.value})
        })

        // 채팅방 검색 버튼 이벤트
        $contentSearch.addEventListener('click', () => {
            if ($contentDropdownOption) $contentDropdownOption.hide();
            global.scrollMoreFlag = false;
            global.scrollObserveFlag = false;
            $contentSearchSub.classList.remove('cus-hide')
            $contentSearchSub.classList.add('cus-show')
            $contentOption.classList.remove('bi-three-dots-vertical')
            $contentOption.classList.add('bi-x-lg')
            $contentSearchText.focus()

        })

        // 검색된 문자열 이동 이벤트
        $contentSearchPrev.addEventListener('click', () => {
            if (lines.length > 0 && lines_idx > 0) {
                lines_idx = lines_idx - 1;
                searchMove($contentSearchText.value);
            }
        })

        // 검색된 문자열 이동 이벤트
        $contentSearchNext.addEventListener('click', () => {
            if (lines.length > 0 && lines.length > lines_idx + 1) {
                lines_idx = lines_idx + 1;
                searchMove($contentSearchText.value);
            }
        })


        // 채팅방 검색 이벤트
        $contentSearchText.addEventListener('keyup', (e) => {
            const talkId = localStorage.getItem(global.tabId)
            const _this = e.currentTarget;
            if (e.key === 'Enter') {
                searchHighLightReset()
                if (_this.value.length < 2) {
                    global.notifier.alert('최소 2글자 이상 작성 해주세요')
                    return;
                }
                global.talkClean()
                lines = [];
                getMessageSearch({
                    talkId: talkId,
                    search: _this.value,
                    callback: function (lists) {
                        const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];
                        if (lists.talks.length === 0) {
                            global.notifier.alert('조회된 대화 내용이 없어요')
                        } else {
                            cacheTalk.messageParams.start = lists.talks.length;
                            const chatContent = global.shadowRoot.querySelector('#chat-content');
                            const content = chatContent.querySelector('.simplebar-content');
                            content.style.marginTop = '50px'
                            messageMapping(talkId, lists, 'before', true);
                            const contentBody = global.shadowRoot.querySelector('.chat-content-body');
                            const wrappers = contentBody.querySelectorAll('.chat-text-wrapper');
                            wrappers.forEach((wp) => {
                                const value = wp.querySelector('.chat-message').innerText
                                const searchYn = wp.querySelector('.chat-message').getAttribute('search-yn');
                                if (value.includes(_this.value) && JSON.parse(searchYn)) {
                                    lines.push(wp)
                                }
                            })

                            if (lines.length !== 0) {
                                lines_idx = lines.length - 1;
                                searchMove(_this.value);
                            }

                        }

                    }
                })
            }

        })

        // 위치 이동 기능
        const searchMove = (search) => {
            $contentSearchTot.setAttribute('data-tot', `${lines_idx + 1}/${lines.length}`)
            const elementPosition = lines[lines_idx].offsetTop;
            const contentBody = global.shadowRoot.querySelector('.chat-content-body')
            const contentSc = contentBody.querySelector('.simplebar-content-wrapper')
            searchHighLightReset();
            const chatMassage = lines[lines_idx].querySelector('.chat-message');
            chatMassage.innerHTML = chatMassage.textContent.replace(search, `<span class="search-text">${search}</span>`)
            contentSc.scrollTo(0, elementPosition - 50)
            try {
                const checker = setInterval(() => {
                    console.log(contentSc.scrollTop, elementPosition)
                    if(contentSc.scrollTop === elementPosition - 50) {
                        const indicate = global.shadowRoot.querySelector('.loading-wrap')
                        indicate.classList.remove('cus-loading-show')
                        indicate.classList.add('cus-hide')
                        console.log('move ok')
                        clearInterval(checker)
                    }
                }, 100)

            } catch(e) {}
        }

        // 검색 문자열 하이라이트 기능
        const searchHighLightReset = () => {
            lines.forEach((li) => {
                try {
                    const chatM = li.querySelector('.chat-message')
                    chatM.innerHTML = chatM.textContent;
                } catch (e) {
                }
            })
        }


        // 톡방 전체 검색 ENTER 이벤트
        $chatAllSearchText.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                searchHighLightReset()
                const vNode = [];
                const search = e.currentTarget.value;
                const sc = $chatAllSearchList.querySelector('.simplebar-content');

                if (search.length < 2 && search.length !== 0) {

                    global.notifier.alert('최소 2글자 이상 작성 해주세요')
                    return;
                }
                if (search.length === 0) {
                    vNode.push(allSearchEmpty)
                    m.render(sc, vNode);
                    return;
                }

                getAllContentSearch({
                    search: search,
                    callback: function (lists) {
                        if (lists.length > 0) {
                            lists.forEach((se) => {
                                const room = global.shadowRoot.querySelector(`div[data-talk-id="${se.talkId}"]`)
                                const workNm = room.dataset.workNm
                                vNode.push([
                                    m('div', {
                                        class: 'd-flex p-1 chat-text-wrapper chat-all-search cursor-pointer',
                                        "data-all-line": `${se.line}`,
                                        'data-all-chat-id': `${se.talkId}`,
                                    }, [
                                        m('div', {class: 'avatar avatar-l me-2', style: 'flex-basis:5%;'}, [
                                            m('div', {
                                                class: "rounded-circle",
                                                style: "width:30px;height:30px;border-radius:10px;background-color:#A9E4FF;text-align:center; line-height:32px;"
                                            }, workNm.substring(0, 1))
                                        ]),
                                        m('div', {class: 'w-xxl-85', style: 'flex-basis:63%;'}, [
                                            m('div', {
                                                class: `chat-message bg-200 p-2 rounded-2 ml-10 your`,
                                                style: 'max-width: 100% !important;font-size:0.83333em;'
                                            }, se.message),
                                            m('div', {
                                                class: `ml-10`,
                                                style: 'font-size:12px'
                                            }, `${workNm} (${se.insName})`)

                                        ]),
                                        m('div', {class: 'text-400 fs-11 chat-date ml-10'}, se.insDate.substring(0, 10))

                                    ])
                                ]);
                            });
                            m.render(sc, vNode);
                        } else {
                            vNode.push(allSearchEmpty)
                            m.render(sc, vNode);
                        }
                    }
                })
            }
        })

        /*매뉴얼 검색 이벤트*/
        $manualDocText.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                getManual({
                    search: e.currentTarget.value,
                    workId: e.currentTarget.value === '' ? global.work.workId : '',
                    type: '0000',
                    callback: function (lists) {
                        const manualVNode = [];
                        const content = $manualDocBody.querySelector('.simplebar-content');
                        if (lists.length !== 0) {

                            lists.map((ma) => {
                                manualVNode.push(
                                    m('div', {class: "d-flex justify-content-evenly manual-content"}, [
                                        m('div', {
                                            class: "p-2 text-ellipsis",
                                            style: "font-size:13px; width:70%;"
                                        }, `${ma.onm}`),
                                        m('div', {class: "p-2", style: "font-size:13px; width:20%;"}, `${ma.version}`),
                                        m('a', {
                                            href: `${global.apiUrl}/api/manual/download/doc?workId=${ma.workId}&vnm=${ma.vnm}`,
                                            style: 'padding-top:3px;'
                                        }, [
                                            m('i', {
                                                class: "bi bi-download text-black",
                                                style: "padding-right:10px; font-size:1.0rem; cursor:pointer;"
                                            })
                                        ])
                                    ])
                                )
                            })
                            m.render(content, manualVNode)
                        } else {
                            manualVNode.push(allSearchEmpty)
                            m.render(content, manualVNode)
                        }
                    }
                })

            }
        })


        /*동영상 매뉴얼 검색 이벤트*/
        $manualVideoText.addEventListener('keyup', function (e) {
            if (e.key === 'Enter') {
                getVideoManual({
                    search: e.currentTarget.value,
                    workId: e.currentTarget.value === '' ? global.work.workId : '',
                    callback: function (lists) {
                        const manualVNode = [];
                        const content = $manualVideoBody.querySelector('.simplebar-content');

                        if (lists.length !== 0) {
                            lists.map((ma) => {
                                manualVNode.push(
                                    m('div', {class: "d-flex justify-content-evenly manual-content"}, [
                                        m('div', {
                                            class: "p-2 text-ellipsis",
                                            style: "font-size:13px; width:70%;"
                                        }, `${ma.onm}`),
                                        m('button', {
                                            class: 'btn btn-sm btn-play manual-play-btn p-0',
                                            'data-id': ma.id,
                                        }, '재생')
                                    ])
                                )
                            })
                            m.render(content, manualVNode)
                        } else {
                            manualVNode.push(allSearchEmpty)
                            m.render(content, manualVNode);
                        }
                        // videoManualPlayEvent();
                    }
                })
            }
        })

        // 사이드바 위치 검색 기능
        const calcSliderPos = (e, maxV) => {
            return (e.offsetX / e.target.clientWidth) * parseInt(maxV, 10);
        }

        // 만족도 조사 별점 스타일 변경 이벤트
        const upStar = (val) => {
            val = parseFloat(val);
            $chatRating.dataset.val = val;
            const full = Number.isInteger(val);
            val = parseInt(val);
            const stars = $chatRating.querySelectorAll('i')


            Array.from(stars).slice(0, val).forEach((star) => star.setAttribute('class', 'bi bi-star-fill'));
            Array.from(stars).slice(val, 5).forEach((star) => star.setAttribute('class', 'bi bi-star'));
        }

        let hoverValue = 0
        $chatRating.addEventListener('click', function (e) {
            e.target.dataset.val = hoverValue;
        })

        // 만족도 조사 별점 선택 이벤트
        $chatRatingCtrl.addEventListener('click', function (e) {
            const maxV = parseInt($chatRating.dataset.max)
            hoverValue = Math.ceil(calcSliderPos(e, maxV) * 2) / 2;
            if (hoverValue < 1) hoverValue = 1
            upStar(hoverValue)
        })

        // 만족도 조자 저장 이벤트
        $chatRatingBtn.addEventListener('click', function (e) {
            const chatRatingConfirmWrapper = global.shadowRoot.querySelector('.chat-rating-confirm-wrapper')

            /* ratingYn = true 변경 */
            const talk = global.talkData.filter((talk) => talk.talkId === localStorage.getItem(global.tabId));
            talk[0].ratingYn = true;
            talkMapping(global.talkData)

            const reqId = talk[0].reqId;
            const star = $chatRating.dataset.val
            const content = $chatRatingReview.value
            if (star < 5 && (content === null || content === '')) {
                global.notifier.alert('만족도 조사 내용을 작성해 주세요.')
                return false;
            }
            chatRatingConfirmWrapper.classList.add('cus-hide')
            /* api전송 로직 추가*/
            if(reqId.includes('REQ')) {
                setSCMSatis(talk[0].talkId, reqId, star, content)
            } else {
                setITSMSatis(talk[0].talkId, reqId, star, content)
            }

            /*파라미터 초기화*/
            $chatRating.dataset.val = 5;
            $chatRatingCtrl.dataset.val = 5;
            $chatRating.querySelectorAll('i').forEach((i) => {
                i.classList.remove('bi-star-half');
                i.classList.remove('bi-star');
                i.classList.add('bi-star-fill')
            })
            $chatRatingReview.value = "";
        })

        /*자세히보기 닫기 이벤트*/
        $detailClose.addEventListener('click', () => {
            const detailContainer = global.shadowRoot.querySelector('#detail-container');
            detailContainer.classList.remove('cus-show')
            detailContainer.classList.add('cus-hide')
            detailContainer.setAttribute('src', '')
        })

        /*----------- 동적 생성 엘리먼트 이벤트 정의 시작 ---------------*/

        // 톡방 검색 닫기 버튼 클릭시 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '#chat-option.bi-x-lg', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const chatContent = global.shadowRoot.querySelector('#chat-content');
            const content = chatContent.querySelector('.simplebar-content');
            content.style.marginTop = '0px'
            global.scrollMoreFlag = false
            global.scrollObserveFlag = false;
            $contentSearchText.value = ""
            $contentSearchTot.setAttribute('data-tot', `0/0`)
            $contentSearchSub.classList.remove('cus-show');
            $contentSearchSub.classList.add('cus-hide');

            $contentOption.classList.add('bi-three-dots-vertical')
            $contentOption.classList.remove('bi-x-lg')

            searchHighLightReset();

            // 자동 증가 되는 로우 수 만큼 뺌(스크롤시 자동증가 되는거 만큼 빼줌)
            // global.messageParams.start = global.messageData.length - global.messageParams.row;

            // global.scrollMoreFlag = false;
            // global.scrollObserveFlag = false;
            function scrollEnable() {
                global.scrollMoreFlag = true;
                global.scrollObserveFlag = true;
            }

            setTimeout(scrollEnable, 1000)
            if ($contentDropdownOption) $contentDropdownOption.hide();
        })

        // 채팅방 검색 및 폰트 설정 드랍다운 설정
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.bi-three-dots-vertical', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const el = e.currentTarget;
            /* 드랍다운 오류(z-index 강제 변경 로직 추가)*/
            $contentDropdownOption = new Dropdown(el, {
                autoClose: "true",
            });
            $contentDropdownOption.toggle();
        })

        // 컨펌 취소 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-confirm-cancel', function (e) {
            const chatConfirmWrapper = Common.findParentElement(e.target, 'chat-confirm-wrapper');
            chatConfirmWrapper.classList.add('cus-hide');
            chatConfirmWrapper.classList.remove('cus-show');
        })

        /*톡목록 옵션 선택 이벤트*/
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-options', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const el = e.currentTarget;
            /* 드랍다운 오류(z-index 강제 변경 로직 추가)*/
            const drop = new Dropdown(el, {
                autoClose: "true"
            });

            global.shadowRoot.querySelectorAll('.chat-options').forEach(function (el1) {
                if (el !== el1) {
                    const otherDrop = new Dropdown(el1, {
                        autoClose: "true"
                    });
                    otherDrop.hide();

                    el1.parentElement.parentElement.parentElement.style.zIndex = 0;
                } else {
                    if ((global.element.chatSidebar.getBoundingClientRect().bottom - el.getBoundingClientRect().bottom) < 100) {
                        el.parentElement.classList.add('dropup')
                    } else {
                        el.parentElement.classList.remove('dropup')
                    }
                }

            });


            const ul = el.nextElementSibling;
            if (ul.classList.contains('cus-show')) {
                el.parentElement.parentElement.parentElement.style.zIndex = 0;
                drop.hide()
            } else {
                drop.show();
                el.parentElement.parentElement.parentElement.style.zIndex = Number(el.parentElement.parentElement.parentElement.style.zIndex) + 10;

            }
            return false;
        })

        /* 톡방 보관 이벤트*/
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-mark', function (e) {
            e.preventDefault();
            e.stopPropagation();
            const dropdownWrap = Common.findParentElement(e.target, 'dropdown');
            const drop = new Dropdown(dropdownWrap.querySelector('.chat-options'));
            drop.hide()
            const chatWrap = Common.findParentElement(e.target, 'chat-wrap')
            const talkId = chatWrap.dataset.talkId;
            setTalkMark({
                talkId: talkId,
                callback: (data) => {
                    HubEvent.send(global.talkParams({
                        type: 'MARK',
                        talkId: talkId
                    }))
                }
            })
        })

        //톡방 삭제버튼 클릭 컨펌창 활성화
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-delete', function (e) {
            const chatDeleteConfirmWrapper = global.shadowRoot.querySelector('.chat-confirm-wrapper')
            chatDeleteConfirmWrapper.classList.remove('cus-hide');
            e.stopPropagation();
            e.preventDefault();
            const dropdownWrap = Common.findParentElement(e.target, 'dropdown');
            const drop = new Dropdown(dropdownWrap.querySelector('.chat-options'));
            drop.hide()
            const chatWrap = Common.findParentElement(e.target, 'chat-wrap')

            chatDeleteConfirmWrapper.dataset.talkId = chatWrap.dataset.talkId;
            chatDeleteConfirmWrapper.dataset.closeYn = chatWrap.dataset.closeYn;
            chatDeleteConfirmWrapper.dataset.compYn = chatWrap.dataset.compYn;
        })

        // 톡방 삭제 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-delete-btn', function (e) {
            const chatDeleteConfirmWrapper = global.shadowRoot.querySelector('.chat-confirm-wrapper')
            chatDeleteConfirmWrapper.classList.add('cus-hide');
            const talkId = chatDeleteConfirmWrapper.dataset.talkId;
            const closeYn = chatDeleteConfirmWrapper.dataset.closeYn;
            const compYn = chatDeleteConfirmWrapper.dataset.compYn;

            if (closeYn === 'false') {
                global.notifier.alert("상담 종료후 삭제 가능해요.")
                return;
            }

            deleteTalk({
                talkId: talkId,
                callback: (data) => {
                    if (data) {
                        if (localStorage.getItem('talkId') === talkId) {
                            const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
                            chatBack.click();
                        }
                        // talkEvent.talkRemove(talkId)
                        HubEvent.send(global.talkParams({
                            type: 'DELETE',
                            talkId: talkId
                        }))
                    } else {
                        global.notifier.alert("상담 종료후 삭제 가능해요.")
                    }
                }
            })
        })

        // 톡방 입장 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-wrap', function (e) {
            global.scrollMoreFlag = true;
            global.scrollObserveFlag = true;
            const _this = e.currentTarget;
            const unreadFlag = _this.classList.contains('unread-message');
            _this.classList.add('active');
            !e.target.classList.contains('hover-actions') && (global.element.chatSidebar.style.left = '-100%');

            // _this.classList.contains('unread-message') && _this.classList.remove('unread-message');

            /*룸 클릭시 채팅 내용 호출 */
            const talkId = _this.dataset.talkId;
            const workId = _this.dataset.workId;
            const workNm = _this.dataset.workNm;
            const workSmNm = _this.dataset.workSmNm;
            const closeYn = _this.dataset.closeYn;
            const ratingYn = _this.dataset.ratingYn;
            console.log(talkId);

            // 방 접속시 기본 데이터 저장
            localStorage.setItem(global.tabId, talkId);
            localStorage.setItem('workId', workId);
            localStorage.setItem('workNm', workNm);
            global.element.chatEditor.focus()
            /*톡방 만족도 조사 실행 로직*/
            if (JSON.parse(closeYn)) {
                global.element.chatEditorArea.classList.add('cus-hide');
            } else {
                global.element.chatEditorArea.classList.remove('cus-hide');
            }

            if (JSON.parse(closeYn) && !JSON.parse(ratingYn)) {
                const chatRatingConfirmWrapper = global.shadowRoot.querySelector('.chat-rating-confirm-wrapper')

                function ratingShow() {
                    chatRatingConfirmWrapper.classList.remove('cus-hide')
                    chatRatingConfirmWrapper.classList.add('cus-show')
                }

                setTimeout(ratingShow, 800)
            }

            talkEvent.talkHeaderChange(workNm, workSmNm)

            const cacheTalk = global.talkData.filter((talk) => talk.talkId === talkId)[0];

            messageMapping(talkId, cacheTalk.talkMessages, 'before', true)

            // 안읽은 메시지 있을시 진행
            if (unreadFlag) {

                // 구독된 톡방 읽음처리
                if (Object.keys(global.subscribeList).includes(talkId)) {
                    // 소켓 연결이 존재 할시 읽음처리 브로드캐스트로 메시지 읽음 전송
                    talkEvent.send(global.talkParams({
                        type: 'READ',
                        talkId: talkId,
                        workId: workId
                    }))
                } else {
                    setChatRead(talkId).then((result) => {
                        // talkEvent.readMessage(talkId)
                        // talkMapping(global.talkData)
                    })
                }

                // 구독이 안된 톡방 읽음처리 브로드캐스트로 메시지 읽음 전송
                HubEvent.send(global.talkParams({
                    type: "READ",
                    talkId: talkId,
                    insSabun: global.user.sabun
                }))

            }

            // const chatContent = global.shadowRoot.querySelector('#chat-0');
            // chatContent.querySelector('.simplebar-offset').style.bottom = '0px';

        })

        // 톡방 이미지 모달 수동 제어 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', 'div[data-bs-toggle="modal"]', function (e) {
            const imageModal = global.shadowRoot.querySelector(e.target.getAttribute('data-bs-target'));

            const modal = new Modal(imageModal, {
                backdrop: true,
                keyboard: true,
            })
            modal.show()
        })

        // 동영상 메뉴얼 재생 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.manual-play-btn', function (e) {
            const id = e.currentTarget.dataset.id;

            const videoPlayArea = global.shadowRoot.querySelector('#manual-video-play');
            const videoPlay = videoPlayArea.querySelector('video');
            const videoPlaySource = videoPlay.querySelector('source');
            const videoList = global.shadowRoot.querySelector('#manual-video-body');
            videoPlayArea.classList.remove('cus-hide')
            videoPlayArea.classList.add('cus-show')
            // videoList.classList.remove('cus-show')
            // videoList.classList.add('hide-08s')
            videoPlaySource.setAttribute('src', `${global.apiUrl}/api/manual/view/video?id=${id}&type=O`)
            videoPlay.load();
            videoPlay.play();
            // m.render(videoPlay, video)

            global.shadowRoot.querySelector('#manual-video-back').addEventListener('click', function () {
                videoPlayArea.classList.remove('cus-show')
                videoPlayArea.classList.add('cus-hide')
                // videoList.classList.remove('hide-08s')
                // videoList.classList.add('cus-show')
                videoPlay.pause();
                videoPlaySource.setAttribute('src', '')
            })
        })

        // 톡방 전체 검색 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '.chat-all-search', function (e) {
            const indicate = global.shadowRoot.querySelector('.loading-wrap')
            indicate.classList.remove('cus-hide')
            indicate.classList.add('cus-loading-show')
            lines = [];
            const line = e.currentTarget.getAttribute("data-all-line")
            const talkId = e.currentTarget.getAttribute("data-all-chat-id")
            const room = global.shadowRoot.querySelector(`div[data-talk-id="${talkId}"]`)
            const workNm = room.dataset.workNm
            const workSmNm = room.dataset.workSmNm
            talkEvent.talkHeaderChange(workNm, workSmNm)
            localStorage.setItem(global.tabId, talkId);
            global.messageParams.talkId = talkId;
            const findText = $chatAllSearchText.value;
            getMessageSearch({
                talkId: talkId,
                search: findText,
                callback: function (lists) {

                    talkEvent.messageShow()
                    $contentSearch.click();
                    $contentSearchText.value = findText;
                    messageMapping(talkId, lists, 'before', true);

                    const contentBody = global.shadowRoot.querySelector('.chat-content-body');
                    const wrappers = contentBody.querySelectorAll('.chat-text-wrapper');
                    for(let idx =0; idx< wrappers.length; idx++) {
                        const wp = wrappers[idx];
                        const msg = wp.querySelector('.chat-message')
                        const value = msg.innerText
                        const searchYn = msg.getAttribute('search-yn');
                        if (value.includes(findText) && JSON.parse(searchYn)) {
                            lines.push(wp)
                            const getLine = msg.getAttribute('data-line');

                            if (line === getLine) {
                                lines_idx = lines.length - 1;
                            }
                        }
                    }

                    setTimeout(searchMove, 200, findText)
                }
            });
        })

        // 톡방 전체 검색 이벤트
        Common.addDelegatedEventListener(global.shadowRoot, 'click', '#socket-reset-btn', function (e) {
            talkEvent.repair()
        })

        /*----------- 동적 생성 엘리먼트 이벤트 정의 종료 ---------------*/

        // HTML 로드 완료후 스크롤, 비디오, 스크롤 옵저버 호출
        docReady(scrollbarSetting)
        docReady(carouselSetting)
        docReady(contentResizeObserver)

        // 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
        document.addEventListener('fullscreenchange', function () {
            const activePlay = $manualPlaying.querySelector('.active');
            if (activePlay) {
                const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;

                if (isFullScreen) {
                    $carousel.pause();
                } else {
                    $carousel.cycle();
                }
            }
        })

        // 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
        document.addEventListener('webkitfullscreenchange', function (e) {
            const activePlay = $manualPlaying.querySelector('.active');
            if (activePlay) {
                const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;

                if (isFullScreen) {
                    $carousel.pause();
                } else {
                    $carousel.cycle();
                }
            }
        })

        // 홈탭 동영상 풀스크린 실행시 숏동영상 정지 처리
        document.addEventListener('mozfullscreenchange', function () {
            const activePlay = $manualPlaying.querySelector('.active');
            if (activePlay) {
                const isFullScreen = document.fullScrenn || document.mozFullScreen || document.webkitIsFullScreen;

                if (isFullScreen) {
                    $carousel.pause();
                } else {
                    $carousel.cycle();
                }
            }
        })

        // 헬프톡 제외한 다른 탭 선택시 헬프톡 비활성화 이벤트
        document.addEventListener('click', function (e) {
            if (e.target.getAttribute('id') !== 'chat-area') {
                const chatFloating = global.shadowRoot.querySelector('.chat-floating')
                if (!chatFloating.classList.contains('cus-hide')) {
                    $chatFloatingBtn.click();
                    const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
                    chatBack.click();
                }
            }
        })

        // 화면 꺼짐 방지용
        document.addEventListener('click', () => {
            this.requestWakeLock()
        }, {once: true})

        // 중복 이벤트 방지
        let isHandlingEvent = false;
        // 브라우저 탭 활성화 시 서비스워커 꺠우기 및 소켓 재연결 처리
        document.addEventListener('visibilitychange', function () {
            if(document.hidden) {
                const chatBack = global.shadowRoot.querySelector('.contacts-list-show');
                chatBack.click();
            } else {
                tabChangeEvent();
            }
            global.registration.active.postMessage({"type":"WAKEUP"})
        });

        // 톡방 itsm, scm 자세히 보기 클릭시 이벤트 해당 요청 및 작성지시 팝업
        global.shadowRoot.addEventListener('click', (e) => {
            if(e.target.classList.contains('detail-btn')) {
                const detailContainer = global.shadowRoot.querySelector('#detail-container');
                detailContainer.querySelector('iframe').setAttribute('src', e.target.dataset.href)
                detailContainer.classList.remove('cus-hide')
                detailContainer.classList.add('cus-show')
            }
        })

        global.shadowRoot.addEventListener('keydown', (e) => {
            e.stopPropagation();
        })

        document.addEventListener('mouseenter', function() {
            tabChangeEvent();
        })

        const tabChangeEvent = (e) => {
            if(!Common.isMaster() && global.init) {
                console.log('탭이동 및 마우스 엔터 재연결 시도 성공')
            } else if(Common.isMaster) {
                console.log('활성화된 탭')
            } else if(!global.init) {
                console.log('재접속 하기 위한 초기화가 되지 않음')
            }
            if (!Common.isMaster()) {
                if(!global.init) return;
                // 허브 이벤트 제거
                global.hub.stop();
                try {
                    if (global.sockJS.readyState !== 1 && !global.forceKill) {
                        // 초기화 완료 상태값 변경
                        global.init = false;
                        talkEvent.reConnect()
                    }
                } catch (e) {
                    global.init = false;
                    talkEvent.reConnect();
                }
            }
        }
    }
}


export {Talk}