<script setup>

import { computed } from 'vue';
import Checkbox from './Checkbox.vue';
import Icon from './Icon.vue';

const emit = defineEmits(['activated']);

const props = defineProps({
  icon: String,
  item: {
    type: Object,
    default: () => ({
      label: '',
      icon: '',
      action: null,
      separator: false,
      disabled: false,
      visible: true,
      checkbox: false,
      checked: false
    }),
  },
  hasIcons: Boolean,
});

const isVisible = computed(() => {
  const visible = props.item.visible
  return typeof visible === 'function' ? visible() : visible ?? true
});

const isDisabled = computed(() => {
  const disabled = props.item.disabled
  return typeof disabled === 'function' ? disabled() : disabled ?? false
});

function onActivated() {
  if (isDisabled.value) return;
  emit('activated');
}

</script>

<template>
  <div class="pankow-menu-item" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
    <Checkbox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
    <span v-if="!item.separator" :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
    <div class="pankow-menu-item-separator-line" v-if="item.separator"></div>
  </div>
</template>

<style>

.pankow-menu-item,
a.pankow-menu-item,
a.pankow-menu-item:visited {
  display: flex;
  align-items: center;
  user-select: none;
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
  font-family: var(--font-family);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
  outline: none;
  color: black;
}

@media (prefers-color-scheme: dark) {
  .pankow-menu-item,
  a.pankow-menu-item,
  a.pankow-menu-item:visited {
    color: white;
  }
}

.pankow-menu-item-disabled {
  cursor: default;
  opacity: .6
}

.pankow-menu-item:focus,
a.pankow-menu-item:focus,
.pankow-menu-item:hover,
a.pankow-menu-item:hover,
.pankow-menu-keyboard-nav .pankow-menu-item:focus {
  background-color: var(--pankow-color-primary-hover);
  color: white;
}

.pankow-menu-item-disabled:focus,
a.pankow-menu-item-disabled:focus,
.pankow-menu-item-disabled:hover,
a.pankow-menu-item-disabled:hover,
.pankow-menu-keyboard-nav .pankow-menu-item:hover {
  background-color: inherit;
  color: inherit;
}

.pankow-menu-item[separator] {
  color: #666;
  padding: 0;
  margin: 5px 13px;
  font-size: 12px;
  font-weight: var(--pankow-font-weight-bold);
  gap: 5px;
}

.pankow-menu-item[separator]:focus,
.pankow-menu-item[separator]:hover {
  color: #666;
  cursor: unset;
  background-color: unset;
}

.pankow-menu-item-separator-line {
  height: 1px;
  background-color: #c3c3c3;
  flex-grow: 1;
}

.pankow-menu-item-with-icons {
  padding-left: 40px;
}

.pankow-menu-item > .pankow-checkbox {
  margin: 0;
}

a.pankow-menu-item {
  text-decoration: none;
}

</style>
