<script setup lang="ts">
import ASelectRow from "#adata-ui/components/elements/a-select-row/index.vue";
import ATreeSelectMobile from "#adata-ui/components/elements/tree-select-mobile/ATreeSelectMobile.vue";

const items = [
  {id: 1, name: 'Item 1', children: []},
  {
    id: 2, name: 'Item 2', children: [
      {id: 21, name: 'Subitem 2.1', children: []},
      {
        id: 22, name: 'Subitem 2.2', children: [
          {id: 221, name: 'Subsubitem 2.2.1', children: []},
          {id: 222, name: 'Subsubitem 2.2.2', children: []}
        ]
      }
    ]
  },
  {
    id: 3, name: 'Item 3', children: [
      {id: 31, name: 'Subitem 3.1', children: []},
      {id: 32, name: 'Subitem 3.2', children: []}
    ]
  }
  // Можно добавить ещё элементы на третьем уровне вложенности здесь
];
const getId = (items: Item[], ids: number[]): { id: number, name: string }[] => {
  const result: { id: number, name: string }[] = [];

  const search = (item: Item) => {
    if (ids.includes(item.id)) {
      result.push({id: item.id, name: item.name});
    }

    if (item.children?.length) {
      item.children.forEach(child => search(child));
    }
  };

  items.forEach(item => search(item));

  return result;
};

// const updateNames = (items) => {
//   // console.log(items)
//   selectedNames.value = [...items]
//   console.log(selectedNames.value)
// }
const setSelected = (ids) => {
  // console.log(ids)
  selected.value = [...ids]
}
// const selectedNames = ref([])
const selected = ref([])
const selectedNames = computed(() => {
  return getId(items, selected.value)
})
// const initState = () => ({
//   selected: []
// })

</script>

<template>
  <Story
    title="Elements/TreeSelectMobile"
  >
    <a-select-row
      :deletable="false"
      :clearable="false"
      :selected-items="selectedNames"
    />
    <a-tree-select-mobile
      v-model="selected"
      :items="items"
      @update-selected="setSelected"
    />
  </Story>
</template>

<style scoped>

</style>
