<template>
  <v-tooltip
    :top="top"
    :bottom="bottom"
    :left="left"
    :right="right"
    :color="tooltipColor"
    :transition="transition"
  >
    <template v-slot:activator="{ on }">
      <v-btn
        slot="activator"
        fab
        :color="buttonColor"
        :dark="dark"
        :light="light"
        v-on="on"
        @click="$emit('click')"
        :small="small"
        :large="large"
        :x-large="xLarge"
        :x-small="xSmall"
      >
        <v-icon dark>{{ icon }}</v-icon>
      </v-btn>
    </template>
    <span>{{ text }}</span>
  </v-tooltip>
</template>

<script>
export default {
  name: "tooltipButton",
  props: {
    icon: {
      type: String,
      default: "WMi-user",
    },
    buttonColor: {
      type: String,
      default: "black",
    },
    text: {
      type: String,
      default: "متن پیش فرض",
    },
    tooltipColor: {
      type: String,
      default: "black",
    },
    top: {
      type: Boolean,
      default: function () {
        return !this.bottom && !this.left && !this.right ? true : false;
      },
    },
    bottom: {
      type: Boolean,
      default: false,
    },
    left: {
      type: Boolean,
      default: false,
    },
    right: {
      type: Boolean,
      default: false,
    },
    transition: {
      type: String,
      default: "fade-transition",
    },
    dark: {
      type: Boolean,
      default: function () {
        return !this.light ? true : false;
      },
    },
    light: {
      type: Boolean,
      default: false,
    },
    small: {
      type: Boolean,
      default: function () {
        return !this.large && !this.xSmall && !this.xLarge ? true : false;
      },
    },
    large: {
      type: Boolean,
      default: false,
    },
    xSmall: {
      type: Boolean,
      default: false,
    },
    xLarge: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style>
</style>