<!-- eslint-disable vue/prop-name-casing -->
<script>
import {mapGetters, mapMutations} from 'vuex'
import { createIcons, icons } from "lucide";

export default {
  name: 'RightPanel',
  components: {},
  props: {
    // eslint-disable-next-line vue/prop-name-casing
    page_title: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters('auth', ['current_user'])
  },
  mounted() {
    this.icons()
  },
  updated() {
    this.icons()
  },
  methods: {
    ...mapMutations('layout', ["toggle_menu"]),
    icons() {
      createIcons({ icons, "stroke-width": 1.5, nameAttr: "icon" })
    },
    rkey() {
      return Math.random().toString(36).slice(4)
    },
    closeDropDown() {
      setTimeout(() => {
        document.querySelector("body").click()
      }, 1);
    }
  },
}

</script>


<template>
  <div class="flex items-center justify-end grow gapy-2 px-4 border-hide-600">
    <div class="">
      {{ page_title }}
    </div>
    <div class="flex">
      <div class="relative">
        <div class="intro-x dropdown">
          <div
            class="dropdown-toggle notification notification--bullet cursor-pointer"
            role="button"
            aria-expanded="false"
            data-tw-toggle="dropdown"
          >
            <i
              icon="bell"
              class="cursor-pointer border-white/[0.2] border-r border-l p-4 text-white"
              style="width: 55px; height: 55px;"
            />
            <div
              style="font-size: 7px; font-weight: 900; top: 10px; left: 30px"
              class="h-[13px] w-[13px] bg-white rounded-full mr-8 transition absolute flex itens-center justify-center"
            >
              <span
                style="line-height: 13px; font-weight: 900; font-size: 7px"
                class="text-black"
              >0</span>
            </div>
          </div>
          <div class="notification-content pt-2 dropdown-menu">
            <div class="notification-content__box dropdown-content">
              <div class="notification-content__title">
                Оповещения
              </div>
              <div
                v-for="{from, datetime, message, readed} in notifications"
                :key="rkey(message)"
                class="cursor-pointer relative flex items-center "
              >
                <div :class="{'bg-gray-400 w-3 h-3 absolute right-0 bottom-0 rounded-full border-2 border-white dark:border-darkmode-600|, else: ~s|bg-success w-3 h-3 absolute right-0 bottom-0 rounded-full border-2 border-white dark:border-darkmode-600': readed}" />
                <div class="ml-2 overflow-hidden">
                  <div class="flex items-center">
                    <a
                      href="javascript:;"
                      class="font-medium truncate mr-5"
                    >{{ from }}</a>
                    <div class="text-xs text-slate-400 ml-auto whitespace-nowrap">
                      {{ datetime }}
                    </div>
                  </div>
                  <div class="w-full truncate text-slate-500 mt-0.5">
                    {{ message }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cursor-pointer border-white/[0.2] border-r p-4">
        <i
          id="menu_book_icon"
          icon="book"
          class="text-white w-[24px] h-[24px]"
        />
      </div>
      <div class="cursor-pointer border-white/[0.2] border-r p-4">
        <i
          id="menu_question_icon"
          icon="help-circle"
          class="text-white w-[24px] h-[24px]"
        />
      </div>
      <div
        class="cursor-pointer hidden md:flex border-white/[0.2] border-r p-4"
        @click="toggle_menu"
      >
        <i
          id="menu_library"
          icon="library"
          class="text-white w-[24px] h-[24px]"
        />
      </div>
    </div>
    <!-- BEGIN: Account AppContainer -->
    <div class="intro-x dropdown w-[50px] h-[50px] px-3 flex justify-center items-center">
      <div
        class="dropdown-toggle rounded-full overflow-hidden shadow-lg image-fit zoom-in scale-110"
        role="button"
        aria-expanded="false"
        data-tw-toggle="dropdown"
      >
        <img
          alt="image"
          src="/images/profile-4.jpg"
        >
      </div>
      <div class="dropdown-menu w-56">
        <ul class="dropdown-content  before:block before:absolute before:bg-black before:inset-0 before:rounded-md before:z-[-1]">
          <li class="p-2">
            <div class="font-bold">
              {{ current_user?.first_name || "" }} {{ current_user?.last_name || "" }}
            </div>
            <div
              class="text-xs text-black/60 dark:text-slate-500"
              style="margin-top: -0.25rem;"
            >
              {{ current_user?.position || "позиция не указана" }}
            </div>
          </li>
          <li>
            <hr class="dropdown-divider border-white/[0.08]">
          </li>
          <li @click="closeDropDown">
            <router-link
              to="/users/log_out"
              class="dropdown-item hover:bg-white/5 hover:text-black"
            >
              Выйти
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <!-- END: Account AppContainer -->
  </div>
</template>
