<template>
  <v-menu
    v-model="modelValue"
    :close-on-content-click="false"
  >
    <template #activator="{ props: menu }">
      <v-tooltip
        location="bottom"
        open-delay="1000"
      >
        <template #activator="{ props: tooltip }">
          <v-btn
            v-bind="mergeProps(menu, tooltip)"
            color="subtext"
            id="settings"
            data-testid="settings"
            icon="settings"
            size="40"
            variant="text"
          />
        </template>
        <span>{{ t('labels.settings') }}</span>
      </v-tooltip>
    </template>
    <v-list width="350">
      <v-list-subheader>
        <span>{{ t('labels.display') }}</span>
      </v-list-subheader>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.brightness') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.Display.Brightness"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="brightness"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.contrast') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.Display.Contrast"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="contrast"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.opacity') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.Display.Opacity"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="opacity"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-divider class="mt-2" />
      <v-list-subheader>
        <span>{{ t('labels.sensitivity') }}</span>
      </v-list-subheader>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.pan') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.InteractionSettings.PanSensivitity"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="pan"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.zoom') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.InteractionSettings.ZoomSensitivity"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="zoom"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.rotate') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.InteractionSettings.RotateSensitivity"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="rotate"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.cameraRotate') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="scanState.InteractionSettings.CameraRotateSensitivity"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="cameraRotate"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-divider class="my-2" />
      <v-list-item
        lines="two"
        prepend-icon="view_in_ar"
      >
        <template #title>
          <span>{{ t('labels.cubeNavigation') }}</span>
        </template>
        <template #subtitle>
          <span class="text-wrap">{{ t('texts.cubeNavigation') }}</span>
        </template>
        <template #append>
          <v-switch
            data-testid="switch"
            v-model="isVisible"
            color="primary"
          />
        </template>
      </v-list-item>
      <v-divider class="my-2" />
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.stlResolution') }}</span>
          </v-col>
          <v-col>
            <v-text-field
              v-model="stlResolution"
              append-inner-icon="percent"
              color="primary"
              density="compact"
              hide-details
              type="number"
              variant="outlined"
              data-testid="resolution"
            />
          </v-col>
        </v-row>
      </v-list-item>
      <v-divider class="my-2" />
      <v-list-item>
        <v-row
          align="center"
          no-gutters
        >
          <v-col>
            <span class="text-body-1">{{ t('labels.language') }}</span>
          </v-col>
          <v-col>
            <!--            /* v8 ignore next 3 */-->
            <v-select
              :model-value="language"
              color="primary"
              data-testid="language"
              density="compact"
              hide-details
              :items="availableLocales"
              variant="outlined"
              @update:model-value="languageStore.setLanguage($event)"
            >
              <template #prepend-inner>
                <span :class="`fi fi-${FLAG_CODES[language]} text-h4`"></span>
              </template>
              <template #item="{ props, item }">
                <v-list-item v-bind="props">
                  <template #prepend>
                    <span
                      :class="`mr-3 fi fi-${FLAG_CODES[item.raw.value]} text-h4`"
                    ></span>
                  </template>
                </v-list-item>
              </template>
            </v-select>
          </v-col>
        </v-row>
      </v-list-item>
    </v-list>
  </v-menu>
</template>

<script setup lang="ts">
import { isVisible } from '@/composables/useNavigationCube';
import { scanState, stlResolution } from '@/models/scanState';
import { useLanguageStore } from '@/stores/language.store';
import { storeToRefs } from 'pinia';
import { mergeProps } from 'vue';
import { useI18n } from 'vue-i18n';

const FLAG_CODES: Record<string, string> = {
  ar: 'sa',
  bn: 'bd',
  de: 'de',
  en: 'gb',
  'en-GB': 'gb',
  'en-US': 'us',
  'es-ES': 'es',
  fr: 'fr',
  hi: 'in',
  id: 'id',
  it: 'it',
  ja: 'jp',
  'pt-PT': 'pt',
  'zh-CN': 'cn',
};

const { t } = useI18n();

const languageStore = useLanguageStore();
const { language, availableLocales } = storeToRefs(languageStore);

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

defineExpose({
  availableLocales,
  isVisible,
  language,
  stlResolution,
});
</script>
