<script>
import { get, isBoolean } from 'lodash';
import { mapGetters } from 'vuex';

function countDigits(num) {
  return Math.floor(Math.log10(num)) + 1;
}

const redesignedIconsMap = {
  // Рабочий стол
  dashboard_dashboard: 'pgs-dashboard',
  // Информационные панели
  // "performance-panel_apps": "", // Этого в дизайне небыло
  // Справочник критериев
  'criteria-directory_fact_check': 'o_fact_check', // Этого в дизайне небыло
  // Черновики процессов
  'user-tasks_all_inbox': 'border_style', // Этого в дизайне небыло
  // Задачи
  tasks_assignment: 'pgs-tasks',
  // Реестр процессов
  // "processes_all_inbox": "", // Решили не менять, так как картинка из дизайна не подходит
  // Приложения
  solutions_category: 'pgs-app',
  // Конструктор уведомлений
  notifications_view_quilt: 'pgs-message-constructor',
  // Реестр личных дел
  // "personal-accounts_contact_page": "", // Этого в дизайне небыло
  // Сотрудники
  accounts_group_add: 'pgs-people',
  // Организации
  organizations_work_outline: 'pgs-organizations',
  // Инциденты
  incidents_warning_amber: 'pgs-warning', // Этого в дизайне небыло
  // Заявления на подпись
  signedApplications_drive_file_rename_outline: 'pgs-sign-2', // Этого в дизайне небыло
  // Заявления
  statements_forum: 'pgs-statements',
  // Статистика
  reports_equalizer: 'pgs-analytics',
  // Реестры
  registries_storage: 'pgs-registries',
  // Предварительная запись по заявлению
  tickets_book_online: 'pgs-pre-entry',
  // Распоряжения о перечислении денежных средств на банковские карты "МИР"
  'registry-unloading_language': 'pgs-transactions',
  // Распоряжения по выплате беженцам
  'registry-ukranian-refugee-payment_payment': 'pgs-transactions',
  // Список реестров распоряжений
  'registry-orders_receipt': 'o_receipt', // Этого в дизайне небыло
  // Конструктор услуг
  services_category: 'pgs-constructor',

  // Субъекты РФ
  regions_scatter_plot: 'pgs-geo-subjects',

  // Черновики заявлений
  statementDrafts_edit: 'o_edit', // Этого в дизайне небыло
};

export default {
  name: 'MItem',
  data() {
    return {
      hideBadgeForAnimationsSake: true,
    };
  },
  props: {
    depth: {
      type: Number
    },
    route: {
      required: true,
      type: Object,
    },
    drawerOpen: {
      type: Boolean,
    },
    orangeBadge: {
      type: Boolean,
    },
    icon: {
      type: String,
    },
  },
  computed: {
    ...mapGetters('microws', ['selectedRoute']),
    clickable() {
      return isBoolean(this.route.meta?.clickable) ? this.route.meta.clickable : true;
    },
    active() {
      return this.route.name === this.selectedRoute;
    },
    count() {
      return this.$store.getters[this.route.meta.storeCountGetters];
    },
    rightPaddingDependingOnCountSize() {
      return `${((this.count) ? 14 : 0) + countDigits(this.count || 0)*6}px`;
    },
    iconName() {
      return (
        this.icon ||
        redesignedIconsMap[`${this.route.name}_${this.route.meta.icon}`] ||
        this.route.meta.icon
      );
    },
  },
  methods: {
    clickHandler() {
      if (this.$route.name !== this.route.name) {
        this.$router.push({
          name: this.route.name,
          query: this.route.query || [],
        });
      }
    },
    updateBadgeVisibility(val) {
      // видимый badge с задершкой так как мешает анимации когда меню раскрывается
      if (val === true) {
        setTimeout(() => {
          this.hideBadgeForAnimationsSake = false;
        }, 100);
      } else {
        this.hideBadgeForAnimationsSake = true;
      }
    },
  },
  created() {
    const storeCountGetters = get(
      { route: this.route },
      'route.meta.storeCountGetters'
    );
    if (storeCountGetters) {
      if (this.route.meta.storeCountDispatch) {
        this.$store.dispatch(this.route.meta.storeCountDispatch, {});
      }
    }
  },
  watch: {
    drawerOpen(val) {
      this.updateBadgeVisibility(val);
    },
  },
  mounted() {
    this.updateBadgeVisibility(this.drawerOpen);
  },
};
</script>

<template>
  <q-item
    tabindex="-1"
    class="q-item-padding"
    :class="{
      'selected-item-fill-color': active,
      'item-fill-color': !active,
      [`depth-${depth || 0}`]: true,
    }"
    v-ripple="clickable"
    :disable="!clickable"
    :clickable="clickable"
    @click="clickHandler"
  >
    <q-tooltip v-if="!drawerOpen" anchor="center right" self="center left">
      {{ $t(route.meta.label) }}
    </q-tooltip>
    <q-item-section
      style="min-width: initial"
      :style="{
        'padding-left': `${depth*8}px`,
      }"
      avatar
    >
      <q-btn
        dense
        round
        :icon="iconName"
        :class="{ MenuItemNotAction: !clickable }"
      >
        <q-badge
          v-if="iconName && count"
          :class="{
            'orange-badge-highlight' : orangeBadge,
          }"
          class="menu-icon-badge vertical-middle"
          :align="(!iconName) ? 'middle' : 'top'"
          :floating="(iconName) ? true : false"
          
          rounded
        />
      </q-btn>
      <div v-if="active" class="highlight-bar"></div>
    </q-item-section>
    <q-item-section
      class="overflow-hidden menu-item-font"
      :style="{ 'padding-right': rightPaddingDependingOnCountSize }"
    >
      {{ $t(route.meta.label) }}
    </q-item-section>
    <q-item-section
      v-if="count && hideBadgeForAnimationsSake === false"
      class="badge-section"
      side
    >
      <q-badge
        class="menu-label-badge"
        :class="{
          'badge-highlight': !orangeBadge,
          'orange-badge-highlight': orangeBadge,
        }"
        rounded
        :label="count"
      />
    </q-item-section>
  </q-item>
</template>

<style lang="scss" scoped>
.menu-item-font {
  font-family: 'Golos UI', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.item-fill-color {
  color: rgba(2, 12, 18, 0.7);
}

.orange-badge-highlight {
  color: #fdf3ed;
  background: #cf5f14;
}

.badge-highlight {
  color: #014874;
  background: #c8e5f4;
}

.menu-icon-badge {
  height: 12px;
  border-radius: 6px;
  right: 4px;
  top: 4px;
}

.badge-section {
  position: absolute;
  right: 7px;
  top: calc(50% - 8px);
}
.menu-label-badge {
  border-radius: 2px;
  font-family: 'Golos Text'; // TODO change to Golos Text
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.selected-item-fill-color {
  color: #1491cf;
  background: rgba(20, 145, 207, 0.075);
}

.highlight-bar {
  position: absolute;
  right: 0;
  background: #1487cf;
  height: 100%;
  width: 2px;
  border-radius: 2px 0px 0px 2px;
  box-shadow: 0px 0px 4px #1487cf;
}
.q-item-padding {
  padding: 8px 11px;
}
</style>
