<template>
  <div class="menu-container" @mouseenter="showDrop()" @mouseleave="hideDrop($event)">
    <div id="langSwitch" class="language-switch" :class="{ 'lang-active': show }">
      <span
        class="icon-lang icon-language"
        :class="[{ light: props.flag }, `${theme}-lang`]"
      ></span>
      <span
        id="navLanguageLabel"
        class="lang-text"
        :class="[{ light: props.flag }, `${theme}-lang`]"
      >
        {{ curLangLabel }}
      </span>
      <span v-if="props.flag" class="icon-flag"></span>
    </div>
    <DropMemu
      :show="show"
      :need-truduction="false"
      :options="langOptions"
      :offsetX="-16"
      @leave="leave()"
      @select="selectLanguage($event)"
    />
  </div>
</template>
<script setup lang="ts">
import DropMemu from '@/components/DropMenu/DropMenu.vue';
import { computed, ref } from 'vue';
import useStore from '@/stores';
import { useI18n } from 'vue-i18n';
import { setStoreData } from '@/utils/composition';
import { saveStoreToLocal } from '@/utils/common-service';

const props = defineProps({
  flag: {
    type: Boolean,
    default: false,
    required: false,
  },
  theme: {
    type: String,
    default: false,
    required: false,
  },
});

const store = useStore();
const i18n = useI18n();
const show = ref(false);
const langOptions = computed(() => {
  return store.state.glob.langOptions;
});
const curLangLabel = langOptions.value.filter((lang: any) => lang.id === i18n.locale.value)[0]
  .label;

function leave() {
  show.value = false;
}

function selectLanguage(ev: any) {
  setStoreData('loct', 'locale', ev.id);
  saveStoreToLocal();
  self.location.reload();
}

function showDrop() {
  show.value = true;
}

function hideDrop(ev: MouseEvent) {
  show.value = false;
}
</script>

<style scoped lang="scss">
.menu-container {
  display: flex;
  height: 100%;
}

.simple-lang {
  color: #d3dce9 !important;
}

.language-switch {
  display: flex;
  align-items: center;
  height: 100%;
  &.lang-dib {
    display: inline-block;
  }
  .icon-lang {
    display: inline-block;
    height: 24px;
    width: 24px;
    font-size: 24px;
    vertical-align: middle;
  }
  .lang-text {
    cursor: pointer;
    padding: 0 6px 0 8px;
    font-size: 14px;
    vertical-align: middle;
    color: $APP-COLOR-TEXT;
  }
  .icon-flag {
    position: relative;
    display: inline-block;
    height: 0;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid $APP-BORDER-COLOR-DROP;
    cursor: pointer;
    vertical-align: middle;
  }

  &.lang-active {
    span,
    span::before {
      color: $APP-COLOR-HOVER !important;
      border-top-color: $APP-COLOR-HOVER !important;
    }
  }
}

.standard {
  .standard-lang {
    color: #d3dce9 !important;
    &:before {
      color: #fffffe !important;
    }
  }
}

.ibma-lang {
  color: #d3dce9 !important;
  &:before {
    color: #fffffe !important;
  }
}

.beautiful {
  .beautiful-lang {
    color: #d3dce9 !important;
    &:before {
      color: #fffffe !important;
    }
  }
}
</style>
