<template>
  <div style="background-color: #f5f5f5; height: 100vh; overflow: auto">
    <div
      class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"
    >
      <h5 class="my-0 mr-md-auto font-weight-normal "><b>Network App - Messenger</b></h5>
      <nav class="my-2 my-md-0 mr-md-3">
        <a-button
          type="danger"
          size="large"
          style="margin:0px 5px 0px 0px"
          @click="toAuthorization"
          >Log out
          <a-icon type="poweroff" />
        </a-button>
        <a-button size="large" type="primary" @click="showDrawer">
          Online
          <a-icon type="team" />
        </a-button>
        <a-drawer
          title="These users are online now:"
          placement="right"
          :closable="false"
          @close="closeDrawer"
          :visible="drawerVisible"
        >
          <p v-for="user in usersList" :key="user">
            <a-icon type="check-circle" theme="twoTone" v-if="user" />
            {{ user }}
          </p>
        </a-drawer>
      </nav>
    </div>

    <div class="container">
      <div class="py-5  "></div>
      <div class="row">
        <div class="col-6" style="margin: 0px 100px 0px -100px" >
          <h3 class="text-center"><b>You</b></h3>

          <p class="d-block mb-2" style="font-size: 18px">
            <span style=" text-decoration: underline">Nickname:</span>
            <b>{{ this.$route.params.name }} </b>
          </p>
          <label
            for="message"
            style="font-size: 18px; text-decoration: underline"
          >
            Your message:
          </label>
          <textarea
            name="message"
            v-model="message"
            class="form-control"
            placeholder="Enter your message"
            @keydown.enter.exact.prevent
            @keyup.enter.exact="send"
            @keydown.enter.shift.exact="newline"
          ></textarea>
          <br />
          <button @click="send" class="btn btn-danger">Send</button>
        </div>
        <div class="col-6">
          <h3 class="text-center"><b>All messages</b></h3>
          <div

            style="font-size:20px"
            v-for="message in messages"
            v-bind:key="message.id"
          >
            <p

              class="alert alert-primary"
              style="border-radius:20px"
              role="alert"
            >

              <b>{{ message.user }}</b>
              : {{ message.newMess }}
                               </p>
          </div>

        </div>
      </div>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    </div>


  </div>
</template>

<script>
import VueCryptojs from 'vue-cryptojs'
import io from "socket.io-client";
import { Drawer, Button, Icon } from "ant-design-vue";

export default {
  components: {
    Drawer,
    Button,
    Icon
  },

  data() {
    return {
      readyConnect: false,
      readyDisconnect: false,
      usersList: [],
      messages: [],
      name: "",
      message: "",
      connect: "",
      disconnect:"",
      drawerVisible: false,
      connectionList: [],

    };
  },

  created() {
    this.client = io.connect("http://"+ this.$route.params.address + ":" + this.$route.params.port + "/")
    this.client.emit("join", this.$route.params.name);
    this.client.emit('add', this.$route.params.name);
    this.client.on("add mess", data => {

      this.messages.push({
        user: data.name ,
        newMess: this.CryptoJS.AES.decrypt(data.mess,'secretMess').toString(this.CryptoJS.enc.Utf8)
      });
    }),
      this.client.on("online", data => {
        this.usersList = data;
      })

  },

  methods: {
    send: function() {
      if (this.message.length ) {


        this.client.emit("send mess", {
          mess: this.CryptoJS.AES.encrypt(this.message, 'secretMess').toString(),
          name: this.$route.params.name,
        });
      }

      this.message = "";
    },
    toAuthorization: function() {
      this.$router.push({ path: "/" });
      this.client.close()
    },

    showDrawer: function() {
      this.drawerVisible = true;
    },

    closeDrawer: function() {
      this.drawerVisible = false;
    },

    showUser: function(userName) {}
  },
  mounted() {}
};
</script>

<style></style>