const codeStarting = document.querySelector('#codeStart')
const codeStarting2 = document.querySelector('#codeStart2')

const texthtml = document.querySelector('#html');
const textcss = document.querySelector('#css');
const textjs = document.querySelector('#js');
const outPut = document.querySelector('#live');
let activeEditor = null;

function createEditor(target, mode) {
    return CodeMirror.fromTextArea(target, {
        mode: mode,
        theme: 'darcula',
        lineNumbers: true,
        spellcheck: true,
        extraKeys: { 'Ctrl-Space': 'autocomplete' },
        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        foldGutter: true,
    });
}

let html = null;
let css = null;
let js = null;

function updateOutput() {
    const outputHTML = html ? html.getValue() : '';
    const outputCSS = css ? css.getValue() : '';
    const outputJS = js ? js.getValue() : '';

    // HTML, CSS 코드를 iframe의 body에 추가
    outPut.contentWindow.document.body.innerHTML = outputHTML + '<style>' + outputCSS + '</style>';
    
    // JavaScript 코드를 iframe의 body에 추가
    // 스크립트 태그를 생성하여 해당 코드를 추가함
    const scriptElement = document.createElement('script');
    scriptElement.textContent = outputJS;
    outPut.contentWindow.document.body.appendChild(scriptElement);
}

function setActiveEditor(editor) {
    if (activeEditor) {
        activeEditor.getWrapperElement().style.display = 'none';
    }

    if (editor) {
        editor.getWrapperElement().style.display = 'block';
        editor.refresh();
        activeEditor = editor;
    }
}

const tabItems = document.querySelectorAll('.tab-container__item');
const contentContainers = document.querySelectorAll('.content-container__content');

tabItems.forEach((item, index) => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        tabItems.forEach((title) => {
            title.classList.remove('active');
        });
        setActiveEditor(null);

        if (index === 0) {
            if (!html) {
                html = createEditor(texthtml, 'html');
                codeStarting.addEventListener('click', updateOutput);
            }
            setActiveEditor(html);
        } else if (index === 1) {
            if (!css) {
                css = createEditor(textcss, 'text/css');
                codeStarting.addEventListener('click', updateOutput);
            }
            setActiveEditor(css);
        } else if (index === 2) {
            if (!js) {
                js = createEditor(textjs, 'text/javascript');
                codeStarting.addEventListener('click', updateOutput);
            }
            setActiveEditor(js);
        }

        item.classList.add('active');
        contentContainers[index].classList.add('target');
        // updateOutput();
    });
});

const updateOutput=()=> {
    const outputHTML = html ? html.getValue() : '';
    const outputCSS = css ? css.getValue() : '';
    const outputJS = js ? js.getValue() : '';

    // HTML, CSS 코드를 iframe의 body에 추가
    outPut.contentWindow.document.body.innerHTML = outputHTML + '<style>' + outputCSS + '</style>';
    
    // JavaScript 코드를 iframe의 body에 추가
    // 스크립트 태그를 생성하여 해당 코드를 추가함
    const scriptElement = document.createElement('script');
    scriptElement.textContent = outputJS;
    outPut.contentWindow.document.body.appendChild(scriptElement);
}

// 코드 보내기 클릭
const codeSend = document.querySelector('#codeSend')
codeSend.addEventListener('click',()=>{
  chatSocket.emit('sendClick')
  })

chatSocket.on('socketUser',(data)=>{
  const checkUser = document.getElementsByName('checkuser')
  
  let myHtml = html ? html.getValue() : '';
  let myCss = css ? css.getValue() : '';
  let myJs = js ? js.getValue() : '';
  
  checkUser.forEach((user)=>{
    if(user.checked == true){
      axios.post('/codeChat/userSocket', {name : user.value, roomNum : data.roomNum})
        .then(res=>{
          let data = JSON.parse(res.data)
          chatSocket.emit('codeSendBtn', {html : myHtml, css : myCss, js : myJs, name:user.value, socketId : data.SOCKET_ID})
        })
    }
  })
})

//선택한 유저에게 코드 전송
chatSocket.on('codeSend',(data)=>{
  const tabData = document.querySelector('.tab')
  const $tabLang = document.querySelectorAll('.tab-container__item2')
  html2.setValue(data.html)
  css2.setValue(data.css)
  js2.setValue(data.js)
  
  $tabLang.forEach((tab)=>{
    tab.addEventListener('click',()=>{
      if(tab.dataset.tab == 'tab4'){
        html2.setValue(data.html)
      }
      else if(tab.dataset.tab == 'tab5'){
        css2.setValue(data.css)
      }
      else if(tab.dataset.tab == 'tab6'){
        js2.setValue(data.js)
      }
    })
  })

// 코드 전송 클릭 감지 후, 해당 방에 접속해있는 인원에게 방번호 값 전송
  socket.on("sendClick", () => {
    ChatNamespace.to(socket.room_number).emit("socketUser", {
      roomNum: socket.room_number,
    });
  });

  // 코드 에디터 코드전송
  socket.on("codeSendBtn", (data) => {
    socket.to(data.socketId).emit("codeSend", data);
  });

router.post('/userSocket',(req,res)=>{
    let roomNum = req.body.roomNum
    let userName = req.body.name
    let sql = 'SELECT * FROM CHAT_USER WHERE ROOM_NUMBER=? AND CONN_USER=?'
    conn.connect()
    conn.query(sql,[roomNum,userName],(err,result)=>{
        if(err){
            console.log('select 오류')
        }
        else{
            console.log('socketID 포함 데이터')
            res.json(JSON.stringify(result[0]))
        }
    })
})