<template>
  <t-dropdown
    style="width: 140px;"
  >

    <div
      slot="trigger"
      slot-scope="{
        mousedownHandler,
        focusHandler,
        keydownHandler,
        blurHandler,
        isShown
      }"
      class="w-full relative transition duration-200 ease-in-out"
    >

      <button
        @mousedown="mousedownHandler"
        @focus="focusHandler"
        @blur="blurHandler"
        @keydown="keydownHandler"
        :class="`w-full cursor-pointer rounded pt-1 ${isShown ? 'rounded-b-none border-b-0 pb-1.5' : 'pb-1'} border-2 border-primary text-primary dark:text-light bg-light dark:bg-dark flex items-center px-2`"
      >

        <!-- Flag icon -->
        <I18nFlagIcon :lang="$i18n.locale" class="mr-2"/>
        <!-- Lang name -->
        <span class="mr-2">{{ LANGS[$i18n.locale].name }}</span>
        <!-- Shown indicator icon -->
        <v-icon
          :name="isShown ? 'sort-up' : 'sort-down'"
          :class="`${isShown ? 'mt-1' : '-mt-2'} absolute right-2`"
        />

      </button>

    </div>

    <!-- Dropdown content -->
    <div
      slot-scope="{
        hide,
        blurHandler
      }"
      class="flex flex-col w-full items-end rounded-b border-2 border-t-0 border-primary overflow-hidden"
    >

      <t-dropdown-button
        v-for="l in LANGS"
        :key="l.lang"
        class="w-full flex items-center py-2 px-2 bg-light dark:bg-dark hover:bg-gray-100 dark:hover:bg-dark-2"
        role="menuitem"
        @blur="blurHandler"
        @click="(function () { $i18n.locale = l.lang; hide() })()"
      >

        <!-- Flag icon -->
        <I18nFlagIcon :lang="l.lang" class="mr-2"/>
        <!-- Lang name -->
        <span class="mr-2">{{ LANGS[l.lang].name }}</span>

      </t-dropdown-button>

    </div>

  </t-dropdown>
</template>

<script>
export default {
  name: 'LangDropdown'
}
</script>
