<template>
  <v-app id="inspire">
    <template v-if="!$vuetify.rtl">
      <v-app-bar app clipped-left color="teal lighten-3" dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
        <router-view name="register_patient"></router-view>

        <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" app clipped>
        <v-system-bar></v-system-bar>

        <v-list nav dense>
          <v-list-item>
            <v-list-item-avatar size="100">
              <v-img :src="src"></v-img>
              <!-- <v-btn x-small fab style="position:absolute;bottom:0;right:0">
                <v-icon small>add_a_photo</v-icon>
              </v-btn>-->
            </v-list-item-avatar>
          </v-list-item>

          <v-list-group no-action>
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title class="pa-2">{{fullName}}</v-list-item-title>
                <!-- <v-list-item-subtitle></v-list-item-subtitle> -->
              </v-list-item-content>
            </template>

            <v-list-item class="pl-10" to="/main/usersetting">
              <v-list-item-icon>
                <v-icon>settings_applications</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{$t("NavigationBar.Setting")}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item class="pl-10" @click="logoffUser">
              <v-list-item-icon>
                <v-icon>exit_to_app</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{$t("NavigationBar.Signout")}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>

          <!-- <v-list-item link>
            <v-list-item-content>
              <v-list-item-title class="title">John Leider</v-list-item-title>
              <v-list-item-subtitle>john@vuetifyjs.com</v-list-item-subtitle>
            </v-list-item-content>

            <v-list-item-action>
              <v-icon>mdi-menu-down</v-icon>
            </v-list-item-action>
          </v-list-item>-->
          <v-divider></v-divider>
          <v-list-item-group v-model="item" color="primary">
            <v-list-item v-for="(item, i) in updatedItems" :key="i" :to="item.url" class="pl-5">
              <!-- <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>-->
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </template>

    <template v-if="$vuetify.rtl">
      <v-app-bar app clipped-right color="teal lighten-3" dark>
        <v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
        <v-toolbar-title class="red--text">Karname</v-toolbar-title>
        <router-view name="register_patient"></router-view>
        <v-spacer></v-spacer>
      </v-app-bar>
      <v-navigation-drawer v-model="drawer" app clipped right>
        <v-system-bar></v-system-bar>
        <v-list nav dense>
          <v-list-item>
            <v-list-item-avatar size="100">
              <v-img :src="src"></v-img>
              <!-- <v-btn x-small fab style="position:absolute;bottom:0;left:0">
                <v-icon small>add_a_photo</v-icon>
              </v-btn>-->
            </v-list-item-avatar>
          </v-list-item>
          <v-list-group no-action>
            <template v-slot:activator>
              <v-list-item-content>
                <v-list-item-title class="pa-2">{{fullName}}</v-list-item-title>
              </v-list-item-content>
            </template>

            <v-list-item class="pr-10" to="/main/usersetting">
              <v-list-item-icon>
                <v-icon>settings_applications</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{$t("NavigationBar.Setting")}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-item class="pr-10" @click="logoffUser">
              <v-list-item-icon>
                <v-icon>exit_to_app</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{$t("NavigationBar.Signout")}}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-group>
          <v-divider></v-divider>
          <v-list-item-group v-model="item" color="primary">
            <v-list-item v-for="(item, i) in updatedItems" :key="i" :to="item.url" class="pr-5">
              <!-- <v-list-item-icon>
                <v-icon v-text="item.icon"></v-icon>
              </v-list-item-icon>-->
              <v-list-item-content>
                <v-list-item-title v-text="item.text"></v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list-item-group>
        </v-list>
      </v-navigation-drawer>
    </template>

    <v-content>
      <transition name="fade" mode="out-in">
        <router-view></router-view>
      </transition>
      <!-- <transition name="fade" mode="out-in">
        <keep-alive>
          <router-view name="edit_worklist"></router-view>
        </keep-alive>
      </transition>-->
    </v-content>

    <app-footer></app-footer>
  </v-app>
</template>

<script>
import { Fragment } from "vue-fragment";
import AppFooter from "../components/AppFooter.vue";
import { Meteor } from "meteor/meteor";
import RegisterPatient from "../components/RegisterPatient.vue";
import { mapActions } from "vuex";
export default {
  mounted() {
    this.items.push({
      text: this.$t("NavigationBar.Worklist"),
      url: "/main/worklist"
    });
    this.items.push({
      text: this.$t("NavigationBar.HISLink"),
      url: "/main/hislink"
    });
    this.items.push({
      text: this.$t("NavigationBar.DeviceMap"),
      url: "/main/devicemap"
    });
    this.items.push({
      text: this.$t("NavigationBar.Client"),
      url: "/main/client"
    });
    // this.items.push({
    //   text: this.$t("NavigationBar.Register"),
    //   url: "/main/register"
    // });
  },
  components: {
    "app-footer": AppFooter,
    fragment: Fragment,
    RegisterPatient
  },
  props: {
    source: String
  },
  methods: {
    ...mapActions(["setLang"]),
    logoffUser() {
      Meteor.logout();
      this.$router.push({ path: "/signin" });
      document.location.reload();
    }
  },
  computed: {
    updatedItems() {
      if (
        Meteor.userId() &&
        this.users.length > 0 &&
        Meteor.users.findOne({ _id: Meteor.userId() }).username == "marcoadmin"
      ) {
        if (
          this.items.findIndex(
            item => item.text == this.$t("NavigationBar.Register")
          ) < 0
        )
          this.items.push({
            text: this.$t("NavigationBar.Register"),
            url: "/main/register"
          });

        if (
          this.items.findIndex(
            item => item.text == this.$t("NavigationBar.Users")
          ) < 0
        )
          this.items.push({
            text: this.$t("NavigationBar.Users"),
            url: "/main/users"
          });

        if (
          this.items.findIndex(
            item => item.text == this.$t("NavigationBar.Transliteration")
          ) < 0
        )
          this.items.push({
            text: this.$t("NavigationBar.Transliteration"),
            url: "/main/transliteration"
          });
      } else {
        let index = this.items.indexOf(this.$t("NavigationBar.Users"));
        if (index > -1) {
          this.items.splice(index, 1);
        }
        index = this.items.indexOf(this.$t("NavigationBar.Register"));
        if (index > -1) {
          this.items.splice(index, 1);
        }
        index = this.items.indexOf(this.$t("NavigationBar.Transliteration"));
        if (index > -1) {
          this.items.splice(index, 1);
        }
      }

      return this.items;
    },
    fullName: {
      get() {
        if (this.users && this.users.length > 0) {
          this.setLang(this.users[0].profile.language.alias);
          return this.users[0].profile.fullName;
        } else {
          return "";
        }
      },
      set(newValue) {
        // this.newFullName = newValue;
      }
    },
    src: {
      get() {
        if (this.users && this.users.length > 0) {
          return this.users[0].profile.picture;
        } else {
          return "/img/empty.png";
        }
      },
      set(newValue) {
        // this.newSrc = newValue;
      }
    },
    selectedLang: {
      get() {
        if (this.users && this.users.length > 0) {
          return this.users[0].profile.language;
        } else {
          return { name: "English", alias: "en" };
        }
      },
      set(newValue) {
        // this.newSelectedLang = {};
        // this.newSelectedLang = newValue;
      }
    }
  },
  data: () => ({
    drawer: null,
    drawerRight: null,
    right: false,
    left: false,
    item: 0,
    items: [
      // { text: "Worklist", url: "/main/worklist", icon: "mdi-folder" },
      // { text: "HISLink", url: "/main/hislink", icon: "mdi-account-multiple" },
      // { text: "DeviceMap", url: "/main/devicemap", icon: "mdi-star" },
      // { text: "Client", url: "/main/client" }
      // Worklist: "لیست کاری",
      //       HISLink: "درگاه HIS",
      //       DeviceMap: "نگاشت",
      //       Client: "دستگاه"
    ]
  }),
  watch: {
    "$vuetify.rtl"(newvalue, oldvalue) {
      this.items = [];
      this.items.push({
        text: this.$t("NavigationBar.Worklist"),
        url: "/main/worklist"
      });
      this.items.push({
        text: this.$t("NavigationBar.HISLink"),
        url: "/main/hislink"
      });
      this.items.push({
        text: this.$t("NavigationBar.DeviceMap"),
        url: "/main/devicemap"
      });
      this.items.push({
        text: this.$t("NavigationBar.Client"),
        url: "/main/client"
      });
      // this.items.push({
      //   text: this.$t("NavigationBar.Register"),
      //   url: "/main/register"
      // });
    }
  },
  meteor: {
    $subscribe: {
      users: []
    },
    users() {
      return Meteor.users.find({ _id: Meteor.userId() });
    }
  }
};
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition-duration: 0.3s;
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
</style>