<script setup lang="ts">
import { ref } from 'vue'

const message = ref('')
const selectedChat = ref('')

// const { messages, chats, isConnected, error, send } = useSharedWebSocket({
  // onMessage: (data) => {
  //   console.log('Received message:', data)
  // },
// })

const onChatClick = (id: string) => {
  console.log(id)
  selectedChat.value = id
  // send({
  //   type: WsDataType.GET_MESSAGES,
  //   data: { chat_id: id },
  // })
}

const sendMessage = () => {
  if (message.value.trim()) {
    // send({
    //   type: WsDataType.CREATE_MESSAGE,
    //   data: {
    //     chat_id: selectedChat.value,
    //     text: message.value,
    //   },
    })
    message.value = ''
  }
}
</script>

<template>
  <v-row>
    <v-col>
      <!--      <div class="status" :class="{ isConnected, disconnected: !isConnected }">-->
      <!--        status: {{ isConnected ? 'connected' : 'disconnected' }}-->
      <!--      </div>-->
      <div>selected chat {{ selectedChat }}</div>
      <!--      <div class="error">Error: {{ error }}</div>-->
    </v-col>
  </v-row>
  <v-row>
    <v-col>
      <div>
        <!--        <div v-for="chat in chats" :key="chat.id" @click="onChatClick(chat.id)">-->
        <!--          <div>{{ chat.id }}</div>-->
        <!--          <div>{{ chat.users }}</div>-->
        <!--        </div>-->
      </div>
    </v-col>
    <v-col>
      <v-sheet border class="pa-4 border-opacity-50">
        <div v-if="selectedChat">
          <v-sheet height="400px" class="overflow-y-auto">
            <!--            <div v-for="message in messages" :key="message.id">-->
            <!--              <div>{{ message }}</div>-->
            <!--            </div>-->
          </v-sheet>

          <div class="d-flex align-center ga-1">
            <v-text-field
              rounded="lg"
              hide-details
              variant="outlined"
              v-model="message"
              @keyup.enter="sendMessage"
              placeholder="Type message..."
            >
            </v-text-field>
            <!--            <v-btn-->
            <!--              :disabled="!isConnected"-->
            <!--              variant="elevated"-->
            <!--              color="primary"-->
            <!--              icon="mdi-send"-->
            <!--              @click="sendMessage"-->
            <!--            />-->
          </div>
        </div>
      </v-sheet>
    </v-col>
  </v-row>
</template>

<style scoped></style>
