<template>
  <div>
    <ul>
      <li
        v-for="items in listItems"
        v-bind:key="items.size"
        class="flex items-center py-3"
        :class="{ 'cursor-pointer': items.collapse }"
        v-on="items.collapse ? { click: () => collapseList() } : null"
      >
        <c-icon
          v-if="items.collapse"
          :name="showSection ? 'chevron-down' : 'chevron-right'"
          type="solid"
          class="mt-3 mr-3 h-5 w-5 flex-none text-gray-900"
        ></c-icon>
        <c-icon
          v-if="items.reorder"
          name="menu-solid"
          type="solid"
          :cursorType="cursorType"
          class="handle mr-3 h-5 w-5 flex-none text-gray-500"
        ></c-icon>
        <c-avatar
          :size="items.size"
          :rounded="items.rounded"
          :image="items.image"
          :imageClasses="items.imageClasses"
          class="flex-none"
        ></c-avatar>
        <div class="flex min-w-0 flex-1 items-center justify-between">
          <div class="ml-3 min-w-0 flex-1">
            <div>
              <div class="-m-1 flex flex-wrap items-center">
                <p class="m-1 text-sm font-medium text-gray-900">
                  {{ items.heading }}
                </p>
                <c-tag v-if="items.tag" label="Active" class="m-1"></c-tag>
                <c-tag v-if="items.tag" label="Inactive" class="m-1"></c-tag>
                <c-tag v-if="items.tag" label="Tag 1" class="m-1"></c-tag>
                <c-tag v-if="items.tag" label="Tag 2" class="m-1"></c-tag>
              </div>
              <p class="mt-1 text-sm text-gray-500">{{ items.description }}</p>
              <div v-if="showSection" class="mt-3">
                <slot></slot>
              </div>
            </div>
          </div>
          <div class="flex flex-none items-center">
            <slot name="icons"></slot>
            <button
              type="button"
              v-if="items.listIcon"
              @click="$emit('remove')"
              class="focus:outline-none"
            >
              <!-- slot for delete icons -->
              <slot name="removeIcons"></slot>
            </button>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import CAvatar from "../CAvatar/CAvatar.vue";
import CTag from "../CTag/CTag.vue";
import CIcon from "../CIcon/CIcon.vue";
export default {
  name: "CReorderableStackedList",
  components: { CAvatar, CTag, CIcon },
  props: {
    listItems: {
      type: Array,
      required: true,
    },
    cursorType: {
      type: String,
      default: "cursor-move",
    },
  },
  data() {
    return {
      showSection: false,
    };
  },
  methods: {
    collapseList() {
      this.showSection = !this.showSection;
    },
  },
};
</script>
