<template>
  <v-app id="inspire">
    <v-navigation-drawer
        v-model="drawer"
        app
        :mini-variant.sync="mini"
        permanent
    >
      <v-sheet
          color="grey lighten-4"
          class="pa-4"
      >
        <v-avatar
            class="mb-4"
            color="grey darken-1"
            size="64"
        >
          <img
              src="./assets/w.jpg"
              :alt="name"
          >
        </v-avatar>
      </v-sheet>

      <v-list-item class="px-2" :to="{ name: 'Help'}">
        <v-list-item-content >
          <v-list-item-title class="headline mb-1">Help</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item class="px-2" :to="{ name: 'Agents'}">
        <v-list-item-content >
          <v-list-item-title class="headline mb-1">Agents</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item class="px-2" style="margin-top: 20px">
        <v-list-item-title>Calls</v-list-item-title>
      </v-list-item>

      <v-divider></v-divider>

      <v-list-item-group v-model="sel">
        <v-card v-for="(call, index) in calls" :to="{ name: 'call', params: {call: call, callId: call.id }}" :key="`call-${index}`"
                class="mx-auto"
                max-width="344"
        >
          <v-list-item three-line >
            <v-list-item-icon>
              <v-icon>mdi-phone-incoming</v-icon>
            </v-list-item-icon>
            <v-list-item-content >
              <div class="overline">{{call.state}}</div>
              <v-list-item-title class="headline mb-1">{{call.displayName}}</v-list-item-title>
              <v-list-item-subtitle>{{call.displayNumber}}</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-card>

        <v-list-item class="px-2">
          <v-list-item-title>Chats</v-list-item-title>
        </v-list-item>

        <v-divider></v-divider>

        <v-card v-for="(chat, index) in chats" :to="{ name: 'chat', params: {chat: chat, chatId: chat.id }}" :key="`chat-${index}`"
                class="mx-auto"
                max-width="344"
        >
          <v-list-item three-line >
            <v-list-item-icon>
              <v-icon>mdi-chat</v-icon>
            </v-list-item-icon>
            <v-list-item-content >
              <div class="overline">{{chat.state}}</div>
              <v-list-item-title class="headline mb-1">{{chat.members[0].name}}</v-list-item-title>
              <v-list-item-title class="headline mb-1 overline">{{chat.members[0].type}}</v-list-item-title>
            </v-list-item-content>
          </v-list-item>

          <!--<v-card-actions class="wbt-list-btn-groups">-->
          <!--</v-card-actions>-->
        </v-card>


      </v-list-item-group>
    </v-navigation-drawer>

    <v-app-bar app dark color="primary">

      <v-toolbar-title>
        {{name}}
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <Agent :agent="agent" v-if="agent" />
      <Logout/>
    </v-app-bar>

    <v-main>
      <v-container  fill-height>
        <v-layout >
          <v-flex >
            <router-view/>
          </v-flex>
        </v-layout>
      </v-container>
    </v-main>

    <NewCallDialog/>
    <Login/>
    <v-btn
        bottom
        color="success"
        dark
        fab
        fixed
        left
        style="z-index: 1000"
        @click="openNewCallDialog()"
    >
      <v-icon>mdi-phone</v-icon>
    </v-btn>
  </v-app>
</template>

<script>
import Agent from './components/Agent';
import Logout from './components/Logout';
import NewCallDialog from "@/components/NewCallDialog";
import Login from "@/components/Login";
import store from './store'
import {socket} from './ws'

export default {
  name: 'App',

  components: {
    Agent,
    Logout,
    NewCallDialog,
    Login
  },
  async created() {
    if (this.$router.currentRoute.name !== "Help") {
      await this.$router.push({name: "Help"})
    }
    await socket(store, this.$router)
  },
  computed: {
    agent() {
      return this.$store.getters.agent
    },
    calls() {
      return this.$store.getters.calls
    },
    chats() {
      return this.$store.getters.chats
    },
    name() {
      return this.$store.getters.name
    },

  },

  data: () => ({
    drawer: true,
    mini: false,
    sel: null
  }),

  methods: {
    openNewCallDialog() {
      this.$store.commit('openNewCallDialog')
    }
  }
};
</script>
