<template>
  <BmsLink :to="(item as MenuItem).link" :target="target" :classes="classes">
    <span class="bar">&nbsp;</span>
    <component v-if="item.icon" :is="item.icon" :size="20" class="icon" />
    <div class="label">
      {{ item.label }}
      <slot name="icon-end" :item="item"></slot>
    </div>
  </BmsLink>
</template>

<script lang="ts" setup>
import { MenuItem } from '@/models/menu.model';
import { computed } from 'vue';
import BmsLink from '@/components/navigation/BmsLink.vue';

const props = withDefaults(
  defineProps<{
    item: MenuItem;
    active?: boolean;
    target?: string;
  }>(),
  { active: false, target: '_self' },
);

const classes = computed(() => {
  let classes: any = { menu__link: true, active: props.active };
  if (props.item.status) {
    classes[props.item.status] = true;
  }
  return classes;
});
</script>

<style lang="scss">
.menu__link {
  --bar-color: transparent;
  --label-color: var(--bms-font-color);

  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  background-color: var(--bms-white);
  width: 100%;
  color: var(--label-color);

  &.active {
    --label-color: var(--bms-main-100);
    --bar-color: var(--bms-main-100);
  }

  &:hover {
    --bar-color: var(--bms-main-75);
    --label-color: var(--bms-main-75);
    text-decoration: none;
  }

  &.danger {
    --label-color: var(--bms-red-100);

    &.active {
      --bar-color: var(--bms-red-100);
    }

    &:hover {
      --bar-color: var(--bms-red-75);
    }
  }

  &.warning {
    --label-color: var(--bms-orange-100);

    &.active {
      --bar-color: var(--bms-orange-100);
    }

    &:hover {
      --bar-color: var(--bms-orange-75);
    }
  }

  &.success {
    --label-color: var(--bms-green-100);

    &.active {
      --bar-color: var(--bms-green-100);
    }

    &:hover {
      --bar-color: var(--bms-green-75);
    }
  }

  &.information {
    --label-color: var(--bms-grey-100);

    &.active {
      --bar-color: var(--bms-grey-100);
    }

    &:hover {
      --bar-color: var(--bms-grey-75);
    }
  }

  .bar {
    width: 4px;
    background-color: var(--bar-color);
    align-self: stretch;
  }

  .label {
    padding: 16px 16px 16px 0;
    line-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
}
</style>
