<!-- test -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Socket.IO Chat</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    ul { list-style-type: none; padding: 0; }
    li { padding: 8px; background-color: #f0f0f0; margin-bottom: 5px; }
    .form-group { margin-bottom: 10px; }
  </style>
</head>
<body>
  <h1>Socket.IO Chat</h1>
  <ul id="messages"></ul>
  <form id="form" action="">
    <div class="form-section">      
      <div class="form-group">
        <button id="init" type="button" onclick="initSocket()">Init</button>
        <input id="token" style="width: 280px" name="token"  type="text" value="82c86325-915a-4403-83b4-6f0221799d35" />
      </div>
    </div>
    <div class="form-section">      
      <div class="form-group">
        <button id="register" type="button" onclick="registerUser()">Register</button>
      </div>
    </div>
    <div class="form-section">
      <div class="form-group">
        <label for="orgId">Organization ID:</label>
        <input id="orgId" name="orgId" type="text" value="11" required />
      </div>
      <div class="form-group">
        <label for="groupType">Group Type:</label>
        <input id="groupType" name="groupType" type="text" value="department" required />
      </div>
      <div class="form-group">
        <label for="entityId">Entity ID:</label>
        <input id="entityId" name="entityId" type="text" value="16503" required />
      </div>
      <div class="form-group">
        <label for="externalId">External ID:</label>
        <input id="externalId" name="externalId" type="text" value="grp3stg20_1418" required />
      </div>
      <div class="form-group">
        <input id="m" autocomplete="off" value="dummy msg" />
        <button id="send" type="button" onclick="sendMessage()" >Send message</button>
      </div>
      <div class="form-group">
        <button id="get messages" type="button" onclick="getMessages()" >Send message</button>
        <label for="offset">Offset:</label>
        <input type="number" id="offset" min="0" max="500" step="1" value="0" placeholder="Offset">
        <label for="limit">Limit:</label>
        <input type="number" id="limit" min="0" max="500" step="1" value="0" placeholder="limit">
      </div>
    </div>
  </form>


  <script src="https://cdn.socket.io/socket.io-1.3.2.min.js"></script>
  <script>
  
   var socket;

    var form = document.getElementById('form');        
    form.addEventListener('submit', function(event) {
      event.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);  // Send the message to the server
        input.value = '';
      }
    });

    let token;
  function initSocket(){    
    let input = document.getElementById('token');
    token = input.value;
    if (socket && socket.connected) {
        logger.debug('Socket already connected');
        return;
    }
    socket = io('http://localhost:71/chat', {
    query: {
      token: token
    }
  });
  socket.on('connect', () => {
    logger.info('connected to server');

    socket.removeAllListeners('MessageReceived');    

  socket.on('MessageReceived', (msg) => {
    // alert('got message:' + msg);
    var li = document.createElement('li');
    li.textContent = msg.message;
    messages.appendChild(li);
  });
 
  socket.on('disconnect', () => {
        logger.info('Disconnected from server');        
        socket.removeAllListeners();
        socket = null;
    });
  });
};
 
  function registerUser(){
    socket.emit('register');
  }

  function joinRoom(roomName){
    socket.emit('joinRoom', roomName);
  }
 
  function sendMessage() {
    const messages = document.getElementById('m').value;
    const orgId = document.getElementById('orgId').value;
    const groupType = document.getElementById('groupType').value;
    const entityId = document.getElementById('entityId').value;
    const externalId = document.getElementById('externalId').value;
    socket.emit('sendMessage', { orgId: orgId,groupType : groupType,entityId:entityId , externalId,externalId, message: messages });
}

async function getMessages() {
  {
      const orgId = document.getElementById('orgId').value;
      const groupType = document.getElementById('groupType').value;
      const entityId = document.getElementById('entityId').value;
      const externalId = document.getElementById('externalId').value;
      const offset = document.getElementById('offset').value;
      const limit = document.getElementById('limit').value;
    try {
    const response = await fetch(`http://localhost:70/chat/organization/${orgId}/groups/${groupType}/${entityId}/messages?offset=${offset}&limit=${limit}`,
    {
      method: 'GET', 
      headers: {
        'Content-Type': 'application/json',    
        'Authorization': `Bearer ${token}`     
      }
    });

    // Check if the response is successful
    if (response.ok) {      
      const data = await response.json();
      logger.debug('Response Data:', data);
    } else {
      logger.error('Request failed with status:', response.status);
    }
  } catch (error) {
    logger.error('Error during the request:', error);
  }
    // const orgId = document.getElementById('orgId').value;
    // const groupType = document.getElementById('groupType').value;
    
    // socket.emit('getMessages', { orgId: orgId,groupType : groupType,entityId:entityId , externalId,externalId, offset: offset, count: count });
  }
}
  function leaveRoom(roomName){
    socket.emit('leaveRoom', roomName);
  }
  
  
  </script>
</body>
</html>
 
 
 