<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`"
      >

        <!-- Color indicator -->
        <div v-if="$root.ui.currentTheme() !== 'auto'" :class="`h-4 w-4 rounded-full border-2 border-primary mr-2 ${ $root.ui.currentTheme() === 'dark' ? 'bg-dark' : 'bg-light' }`"></div>
        <!-- Theme name -->
        <span class="mr-2">{{ $root.ui.currentTheme() | capitalize }}</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"
    >

      <!-- 'Auto' button -->
      <t-dropdown-button
        class="w-full flex items-center py-2 px-2 bg-light dark:bg-dark hover:bg-gray-100 dark:hover:bg-dark-2"
        @blur="blurHandler"
        @click.native="(function () { $root.ui.setTheme('auto'); hide() })()"
      >
        <!-- Theme name -->
        <span class="mr-2">Auto</span><!-- eslint-disable-line -->
      </t-dropdown-button>

      <!-- Light button -->
      <t-dropdown-button
        class="w-full flex items-center py-2 px-2 bg-light dark:bg-dark hover:bg-gray-100 dark:hover:bg-dark-2"
        @blur="blurHandler"
        @click.native="(function () { $root.ui.setTheme('light'); hide() })()"
      >
        <!-- Color indicator -->
        <div class="h-4 w-4 rounded-full border-2 border-primary mr-2 bg-light"></div>
        <!-- Theme name -->
        <span class="mr-2">Light</span><!-- eslint-disable-line -->
      </t-dropdown-button>

      <!-- Dark button -->
      <t-dropdown-button
        class="w-full flex items-center py-2 px-2 bg-light dark:bg-dark hover:bg-gray-100 dark:hover:bg-dark-2"
        @blur="blurHandler"
        @click.native="(function () { $root.ui.setTheme('dark'); hide() })()"
      >
        <!-- Color indicator -->
        <div class="h-4 w-4 rounded-full border-2 border-primary mr-2 bg-dark"></div>
        <!-- Theme name -->
        <span class="mr-2">Dark</span><!-- eslint-disable-line -->
      </t-dropdown-button>

    </div>

  </t-dropdown>
</template>

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