<template>
  <div>
    <ul>
      <li
        v-for="items in listItems"
        v-bind:key="items.size"
        class="py-4"
        :class="{
          'cursor-pointer': items.collapse,
          'border-b border-gray-200': divider === true,
        }"
      >
        <div class="flex items-center justify-between">
          <div
            class="flex w-full items-center"
            v-on="items.collapse ? { click: () => collapseList() } : null"
          >
            <c-icon
              v-if="items.collapse"
              :name="showSection ? 'chevron-down' : 'chevron-right'"
              type="solid"
              class="mr-3 h-5 w-5 shrink-0 text-gray-900"
            ></c-icon>

            <div v-if="isIcon" class="h-full rounded-md bg-gray-100">
              <c-avatar
                v-if="items.image"
                :size="items.size"
                :rounded="items.rounded"
                :image="items.image"
                class="shrink-0"
              ></c-avatar>
              <c-icon
                v-else
                :name="icon.name"
                :type="icon.type"
                :class="icon.class"
              ></c-icon>
            </div>
            <div v-else-if="isCustomIcon" class="h-full">
              <slot name="customIcon"></slot>
            </div>
            <c-avatar
              v-else
              :size="items.size"
              :rounded="items.rounded"
              :image="items.image"
              class="shrink-0"
            ></c-avatar>
            <div class="ml-3 w-full">
              <div class="flex items-center">
                <p class="text-sm font-medium text-gray-900">
                  {{ items.heading }}
                </p>
                <div class="flex items-center" v-if="sideIcon">
                  <c-icon
                    :name="sideIcon.name"
                    :type="sideIcon.type"
                    :class="sideIcon.class"
                    :viewBox="sideIcon.viewBox"
                  ></c-icon>
                  <p class="text-sm text-gray-900">{{ sideIcon.text }}</p>
                </div>
                <div
                  v-if="items.tagLabels && items.tagLabels.length > 0"
                  class="flex items-center"
                >
                  <c-tag
                    v-for="(tagLabel, i) in items.tagLabels"
                    :key="i"
                    :label="tagLabel.tagLabel"
                    :color="tagLabel.tagColor"
                    class="relative bottom-0.5 ml-2.5"
                  ></c-tag>
                </div>
                <c-tag
                  v-else-if="items.tag"
                  :label="items.tagLabel"
                  :color="items.tagColor"
                  class="relative bottom-0.5 ml-2.5"
                ></c-tag>
              </div>
              <p v-if="items.description" class="mt-1 text-sm text-gray-500">
                {{ items.description }}
              </p>
            </div>
          </div>
          <button
            v-if="items.listIcon"
            type="button"
            :id="listId ? listId : ''"
            class="flex h-8 w-8 items-center justify-center rounded-full text-gray-500 hover:bg-red-100 hover:text-red-800 focus:outline-none focus:ring-2 focus:ring-red-500"
            @click="deleteItem"
          >
            <c-icon
              name="trash"
              type="solid"
              class="h-5 w-5 hover:text-red-800"
            ></c-icon>
          </button>
        </div>
        <div v-if="showSection" class="mt-3 ml-[88px]">
          <slot></slot>
          <!-- <div class="mt-2 h-40 w-full bg-gray-100">something</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: "CStackedList",
  components: { CAvatar, CTag, CIcon },
  props: {
    listItems: {
      type: Array,
      required: true,
    },
    divider: {
      type: Boolean,
      default: true,
    },
    isIcon: {
      type: Boolean,
      default: false,
    },
    isCustomIcon: {
      type: Boolean,
      default: false,
    },
    listId: {
      type: String,
    },
    icon: {
      type: Object,
    },
    sideIcon: {
      type: Object,
    },
  },
  data() {
    return {
      showSection: false,
    };
  },
  methods: {
    collapseList() {
      this.showSection = !this.showSection;
    },
    deleteItem(item) {
      if (this.listId) {
        this.$emit("delete-item", this.listId, item);
      } else {
        this.$emit("delete-item", item);
      }
    },
  },
};
</script>
