import { Server } from 'ws'

const socketHandler = (req, res) => {
  if (!res.socket.server.ws) {
    const wss = new Server({ noServer: true })

    wss.on('connection', socket => {
      socket.on('message', message => {
        wss.clients.forEach(client => {
          client.send(message.toString())
        })
      })
    })

    res.socket.server.ws = wss
  }

  res.end()
}

export default socketHandler

const useWebSocket = () => {
  const [socket, setSocket] = useState(null)
  const [messages, setMessages] = useState([])

  useEffect(() => {
    const ws = new WebSocket(`${process.env.NEXT_PUBLIC_WS_URL}`)

    ws.onmessage = (event) => {
      setMessages(prev => [...prev, event.data])
    }

    setSocket(ws)

    return () => ws.close()
  }, [])

  return { socket, messages }
}

export default function Chat() {
  const { socket, messages } = useWebSocket()
  const [message, setMessage] = useState('')

  const sendMessage = () => {
    if (socket && message) {
      socket.send(message)
      setMessage('')
    }
  }

  return (
    <div>
      <div className="messages">
        {messages.map((msg, index) => (
          <div key={index}>{msg}</div>
        ))}
      </div>
      <input
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      />
      <button onClick={sendMessage}>Send</button>
    </div>
  )
}

const reconnect = (ws, url, attempts = 0) => {
  setTimeout(() => {
    if (attempts < 5) {
      const newWs = new WebSocket(url)
      newWs.onerror = () => reconnect(newWs, url, attempts + 1)
      return newWs
    }
  }, Math.min(1000 * Math.pow(2, attempts), 10000))
}

const joinRoom = (roomId) => {
  if (socket) {
    socket.send(JSON.stringify({
      type: 'JOIN_ROOM',
      roomId
    }))
  }
}