<template>
  <li>
    <a
      v-if="display === 'desktop'"
      class="next"
      :class="{ collapsed: !isOpen, active: isOpen }"
      data-toggle="collapse"
      >{{ title }}</a
    >
    <a v-else-if="display === 'mobile'">{{ title }}</a>

    <ul
      v-if="display === 'desktop'"
      class="collapse"
      :class="{ in: isOpen }"
      style=""
    >
      <MenuSlot @click="onClick($event)">
        <slot :selected="selected"></slot>
      </MenuSlot>
    </ul>
    <ul v-else-if="display === 'mobile'" class="nav">
      <MenuSlot @click="onClick($event)">
        <slot :selected="selected"></slot>
      </MenuSlot>
    </ul>
  </li>
</template>


<script>
// import { str2bool } from "../../util";
import MenuSlot from "./MenuSlot.vue";

export default {
  name: "bc-menu-category",
  data() {
    return {
      isOpen: false,
    };
  },
  components: {
    MenuSlot,
  },
  props: {
    display: {
      type: String,
      default: "desktop",
    },
    title: {
      type: String,
      default: null,
    },
    open: {
      type: [Boolean, String],
      default: false,
    },
    selected: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  watch: {
    selected: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          // console.log("menu category", this.title, newValue);
          if (
            this.selected.breadcrumb &&
            Array.isArray(this.selected.breadcrumb) &&
            this.selected.breadcrumb.includes(this.title)
          ) {
            this.isOpen = true;
            // console.log("open", this.title);
          } else {
            // console.log("close", this.title);
            this.isOpen = false;
          }
        }
      },
    },
  },
  methods: {
    onClick(event) {
      // add own title to breadcrumbs
      if (event.breadcrumb && Array.isArray(event.breadcrumb)) {
        event.breadcrumb.unshift(this.title);
      }
      console.log("[MenuCategory] click", event);
      this.$parent.$emit("click", event);
    },
  },
};
</script>

