<template>
  <v-input v-bind="attrs">
    <v-card width="100%" v-bind="attrs">
      <v-list
        v-model:selected="selected"
        lines="two"
        :select-strategy="attrs.readonly ? 'classic' : 'leaf'"
        class="pa-0"
        density="compact"
        read-only
        open-strategy="single"
      >
        <template
          v-for="(permission, permissionKey, permissionIndex) in props.items"
          :key="permissionKey"
        >
          <v-divider v-if="permissionIndex > 0"></v-divider>
          <v-list-group :value="permissionKey" fluid>
            <template v-slot:activator="{ props }">
              <v-list-item v-bind="props" density="compact">
                <span class="text-capitalize">
                  {{ String(permissionKey).replace(/-/g, " ") }}
                </span>

                <template #prepend>
                  <v-chip class="mr-2" small>
                    {{ selectedActionCount(String(permissionKey)) }}
                  </v-chip>
                </template>
              </v-list-item>
            </template>

            <template v-for="(item, itemKey) in permission" :key="itemKey">
              <v-divider></v-divider>
              <v-list-item v-if="attrs.readonly" density="compact">
                <template #title class="pl-2">
                  <span class="text-subtitle-2 text-capitalize">
                    {{ String(itemKey).replace(/-/g, " ") }}
                  </span>
                </template>

                <template #subtitle class="pl-2">
                  <span class="text-subtitle-2">{{ item.description }}</span>
                </template>
              </v-list-item>

              <v-list-item
                v-else
                :value="`${permissionKey}:${itemKey}`"
                density="compact"
              >
                <template #title class="pl-2">
                  <span class="text-subtitle-2 text-capitalize">
                    {{ String(itemKey).replace(/-/g, " ") }}
                  </span>
                </template>

                <template #subtitle class="pl-2">
                  <span class="text-subtitle-2 text-capitalize">
                    {{ String(item.description).replace(/-/g, " ") }}
                  </span>
                </template>

                <template #prepend="{ isSelected, select }" class="pl-1">
                  <v-list-item-action start>
                    <v-checkbox-btn
                      :model-value="isSelected"
                      @update:model-value="select"
                    ></v-checkbox-btn>
                  </v-list-item-action>
                </template>
              </v-list-item>
            </template>
          </v-list-group>
        </template>
      </v-list>
    </v-card>
  </v-input>
</template>

<script setup lang="ts">
const selected = defineModel<Array<string>>({ default: [] });
const attrs = useAttrs();
const props = defineProps({
  items: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const selectedActionCount = (resource: string) => {
  return selected.value.filter((permission) => permission.startsWith(resource))
    .length;
};
</script>
