<script setup>
import { defineProps } from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const props = defineProps({
  icon: {
    type: String,
    default: undefined,
  },
  label: String,
  template: {
    type: String,
    default: 'default', // 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 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;
}

const hasIcon = () => {
  return props.icon !== undefined && props.icon !== null;
}
</script>

<template>
  <a class="dropdown-item is-disabled">
                    <span class="icon" v-if="hasIcon()">
                      <i :class="getIcon() + ' ' + getIconColor()"></i>
                    </span>
    <span class="ml-1"
          :class="getLabelColor()"
    >{{ SessionUser.functions.ucFirst(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>