<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  clickAction: Function,
  icon: String,
  label: String,
  disabled: Boolean,
  template: String // The style of the button (default, danger, success, warning, info, light)
});

const styles = {
  default: {
    button: 'button is-small is-dark',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-black'
    },
    label: {
      color: 'has-text-black'
    },
  },
  danger: {
    button: 'button is-small is-danger',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-danger'
    },
    label: {
      color: 'has-text-danger'
    },
  },
  success: {
    button: 'button is-small is-success',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-success'
    },
    label: {
      color: 'has-text-success'
    },
  },
  warning: {
    button: 'button is-small is-warning',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-warning'
    },
    label: {
      color: 'has-text-warning'
    },
  },
  info: {
    button: 'button is-small is-info',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-info'
    },
    label: {
      color: 'has-text-info'
    },
  },
  light: {
    button: 'button is-small is-light',
    icon: {
      icon: 'fas fa-cog',
      color: 'has-text-black'
    },
    label: {
      color: 'has-text-black'
    },
  },
};

const click = () => {
  if (props.clickAction && !props.disabled)
    props.clickAction();
}

const isDisabled = () => {
  return props.disabled ?? false;
}

const getIcon = () => {
  return props.icon ?? 'fas fa-cog';
}

const getLabel = () => {
  return props.label ?? 'Unavngivet handling';
}

const getStyle = () => {
  return styles[props.template] ?? styles.default;
}

const getButtonClass = () => {
  return getStyle().button;
}

const getIconClass = () => {
  return getStyle().icon.icon;
}

const getIconColor = () => {
  return getStyle().icon.color;
}

const getLabelColor = () => {
  return getStyle().label.color;
}
</script>

<template>
  <a class="dropdown-item" @click="click" :class="{'is-disabled': isDisabled()}">
                    <span class="icon">
                      <i :class="getIcon() + ' ' + getIconColor()"></i>
                    </span>
    <span class="ml-1"
          :class="getLabelColor()"
    >{{ getLabel() }}</span>
  </a>
</template>

<style scoped>
.is-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.is-disabled:hover {
  background-color: transparent;
}

.is-disabled .icon {
  opacity: 0.5;
}
</style>