export default function navComponent(store) {
  return {
    empty: false,

    children: [],

    init() {
      this.children = this.$refs.items
        ? Array.from(this.$refs.items.children)
        : [];
    },

    isOpen(id) {
      return store.open.includes(id);
    },

    setOpen(id) {
      store.open.push(id);
    },

    setClosed(id) {
      const index = store.open.indexOf(id);
      if (index > -1) {
        store.open.splice(index, 1);
      }
    },

    toggleOpen(id) {
      this.isOpen(id) ? this.setClosed(id) : this.setOpen(id);
    },

    async filter(text) {
      this.debug(`Filter text: ${text}`);

      await this.$nextTick();
      const filteredStates = await Promise.all(
        this.children.map(async (child) => {
          const data = Alpine.$data(child);
          await data.filter(text);
          return data.filteredOut;
        })
      );

      const matchedChildCount = filteredStates.filter((s) => !s).length;
      this.empty = matchedChildCount === 0;

      this.debug(
        `Children matching filter: ${matchedChildCount}/${this.children.length}`
      );
    },
  };
}