<template>
  <div class="dropdown" v-click-outside="close" @click="toggle">
    <button
      :class="className"
      type="button"
      role="dropdown"
      v-on="$listeners"
      :style="`background-color: ${outline ? 'transparent' :color}; border-color: ${color}; color: ${outline ? color : false};`"
      data-toggle="dropdown"
      :aria-expanded="show"
    >
      <eb-icon v-if="hasIcon" :type="icon" :family="iconFamily" :class="hasIcon ? '' : 'mr-2'"/>
      {{ title }}
    </button>
    <div :class="dropdownClassName" :position="position" :show="show">
      <slot></slot>
    </div>
  </div>
</template>


<script>
import EbIcon from '../eb-icon/eb-icon';
import ClickOutside from '../../../directives/click-outside';
import ButtonMixin from '../../../mixins/button-mixin';

export default {
  name: 'EbDropdown',
  components: { EbIcon },
  mixins: [ButtonMixin],
  directives: { ClickOutside },
  props: {
    title: {
      type: String
    },
    position: { default: 'left' },
    kind: {
      type: String,
      default: 'secondary',
      validator: val =>
        [
          'link',
          'default',
          'primary',
          'secondary',
          'ghost',
          'danger',
          'dark',
          'success',
          'info',
          'warning',
          'blue',
          'azure',
          'indigo',
          'purple',
          'pink',
          'red',
          'orange',
          'yellow',
          'lime',
          'green',
          'teal',
          'cyan',
          'gray',
          'gray-dark',
          'facebook',
          'twitter',
          'google',
          'youtube',
          'vimeo',
          'instagram',
          'pinterest',
          'bitbucket'
        ].includes(val)
    }
  },
  data: () => ({
    show: false
  }),
  methods: {
    toggle() {
      this.show = !this.show;
    },
    open() {
      this.show = true;
    },
    close() {
      this.show = false;
    }
  },
  computed: {
    hasIcon() {
      return this.icon !== null;
    },
    className() {
      return [
        'btn',
        'dropdown-toggle',
        this.outline ? 'btn-outline-' + this.kind : 'btn-' + this.kind,
        this.small && !this.large
          ? 'btn-sm'
          : this.large && !this.small
          ? 'btn-lg'
          : '',
        {
          disabled: this.disabled,
          'btn-pill': this.pill,
          'btn-square': this.square,
          'btn-block': this.block,
          'btn-icon': this.hasIcon
        }
      ];
    },
    dropdownClassName() {
      const className = {
        'dropdown-menu': true
      };
      className[`dropdown-menu-${this.position}`] = true;
      className[`dropdown-menu-arrow`] = true;
      className[`show`] = this.show;
      return className;
    }
  }
};
</script>

<style scoped>
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: '';
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-menu {
  font-size: 0.9375rem;
  color: #495057;
  text-align: left;
  list-style: none;
}
.dropdown-menu {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  min-width: 12rem;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 10rem;
  padding: 0.5rem 0;
  margin: 0.125rem 0 0;
  font-size: 0.9375rem;
  color: #495057;
  text-align: left;
  list-style: none;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 40, 100, 0.12);
  border-radius: 3px;
}
.dropdown-menu.show {
  display: block;
  position: absolute;
  transform: translate3d(0px, 38px, 0px);
  top: 0px;
  left: 0px;
  will-change: transform;
}
.dropdown-menu[x-placement^='top'],
.dropdown-menu[x-placement^='right'],
.dropdown-menu[x-placement^='bottom'],
.dropdown-menu[x-placement^='left'] {
  right: auto;
  bottom: auto;
}
</style>


