<template>
  <v-dialog data-testid="dialog" class="justify-end" v-model="modelValue" max-width="453">
    <v-card class="position-relative pb-0">
      <v-card-title class="px-4 pb-2 pt-4">
        <span>{{ t('labels.keyboardShortcuts') }}</span>
        <v-btn
          data-testid="closeBtn"
          variant="text"
          size="default"
          icon="close"
          color="shark_400"
          @click="modelValue = false"
          class="annotation-close-button position-absolute"
          style="top: 0; right: 0"
        />
      </v-card-title>
      <v-divider />
      <v-card-text class="px-3 pb-0">
        <div class="new-style mb-2 pl-1 pr-4">
          <v-text-field
            data-testid="searchBox"
            v-model="search"
            density="compact"
            prepend-inner-icon="search"
            :placeholder="t('fields.search.placeholder')"
            variant="outlined"
          >
            <template #append-inner>
              <!--              Note: Coverage engine crashing with stackoverflow when triggered -->
              <!--              /* v8 ignore start */-->
              <v-btn variant="text" size="24" icon="close" data-testid="close-btn-search" @click="endSearch" />
              <!--              /* v8 ignore end */-->
            </template>
          </v-text-field>
        </div>
      </v-card-text>
      <v-card-text class="pt-0 px-4 pb-4">
        <div v-for="section in filteredItems">
          <div class="title-text pt-0 pb-3">{{ section.title }}</div>
          <ul>
            <li
              v-for="(item, index) in section.items"
              :key="index"
              class="d-flex justify-between align-items-center py-2"
            >
              <span class="list-titles">{{ item.title }}</span>
              <div class="d-flex ml-auto">
                <div
                  :class="['key-box', { 'plus-sign': key === '+' }]"
                  class="text-center"
                  v-for="(key, keyIndex) in item.keys"
                  :key="keyIndex"
                >
                  {{ key }}
                </div>
              </div>
            </li>
          </ul>
          <v-divider class="mt-2 mb-2" />
        </div>
      </v-card-text>
    </v-card>
  </v-dialog>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { SHORTCUT_TEXT, translateTooltipShortcut } from '@/functions/translateTooltipShortcut';
import * as _ from 'lodash';

const { t } = useI18n();

const search = ref('');

const modelValue = defineModel<boolean>({ default: false });

const itemsNew = computed(() => [
  {
    title: t('labels.tools'),
    items: [
      { title: t('labels.display'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altD)) },
      { title: t('labels.annotation'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altA)) },
      { title: t('labels.measurementTools'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altM)) },
      { title: t('labels.mcad'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.altE)) },
      { title: t('labels.share'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.s)) },
      { title: t('labels.saveToCloud'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.c)) },
      { title: t('labels.download'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.d)) }
    ]
  },
  {
    title: t('labels.medicalImageTooling'),
    items: [
      { title: t('labels.resetView'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.r)) },
      { title: t('labels.pan'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.p)) },
      { title: t('labels.zoomIn'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.plus)) },
      { title: t('labels.zoomOut'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.minus)) },
      { title: t('labels.rotateView'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.r)) },
      { title: t('labels.flipHorizontally'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.h)) },
      { title: t('labels.flipVertically'), keys: explodeShortcut(translateTooltipShortcut(SHORTCUT_TEXT.v)) }
    ]
  }
]);

function endSearch() {
  search.value = '';
}

const filteredItems = computed(() => {
  if (!search.value) return itemsNew.value;

  const lowerSearch = search.value.toLowerCase();
  return itemsNew.value
    .map((section) => ({
      title: section.title,
      items: section.items.filter((item) => item.title.toLowerCase().includes(lowerSearch))
    }))
    .filter((section) => section.items.length > 0);
});

function explodeShortcut(shortcut: string): string[] {
  return _.flatMap(shortcut.split('+'), (value: any, index: any, array: any) =>
    array.length - 1 !== index // check for the last item
      ? [value, '+']
      : value
  ).map((key) => key.replace('Plus', '+').replace('Minus', '-'));
}
</script>

<style lang="scss" scoped>
ul {
  list-style-type: none;
  padding: 0;
}

.list-titles {
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  color: #1d1d20;
}

.title-text {
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px;
  color: #5e5e6b;
}

.key-box:not(.plus-sign) {
  display: inline-block;
  flex-direction: column;
  border-radius: 4px;
  padding: 0 8px;
  margin: 2px 2px;
  min-width: 24px !important;
  height: 24px !important;
  border: 1px solid #d9d9de;
  background-color: #f7f7f8;
  box-shadow: 0px 1px 0px 0px #d9d9de;
  //div {
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 22px;
  //}
}

.ml-auto {
  margin-left: auto;
}

.plus-sign {
  background-color: #ffffff !important;
  border: none !important;
  font-weight: 500 !important;
  font-size: 12px;
  line-height: 26px;
  padding-left: 4px !important;
  padding-right: 4px !important;
}
</style>
