<template>
  <div>
    <div
      :class="divider || showSection ? 'border-b border-gray-200 pb-2' : ''"
      class="flex cursor-pointer items-center justify-between gap-2"
      :id="id"
      @click.self="collapse"
    >
      <!-- left and right arrow icon as per opening and closing of collapsible -->
      <div class="flex min-w-0 flex-1 items-center gap-1" @click="collapse">
        <c-icon
          :name="showSection ? 'chevron-down' : 'chevron-right'"
          class="h-5 w-5 shrink-0 text-gray-900"
          type="solid"
        ></c-icon>
        <!-- label of the collapsible section -->
        <div
          :class="[tabAction ? 'py-2' : '', customHeaderClass]"
          class="flex min-w-0 flex-1 items-center gap-1 border-transparent hover:border-gray-300 hover:text-gray-700"
        >
          <span class="min-w-0 truncate" :title="label">{{ label }}</span>
          <span
            v-if="badgeCount > 0"
            class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-gray-100 text-sm font-medium text-gray-900"
          >
            {{ badgeCount }}
          </span>
          <p v-if="isRequired" class="ml-1 text-red-600">*</p>
        </div>
      </div>
      <!-- tertiary button to render on right side of collapsible section -->
      <c-button
        v-if="tabAction && showSection"
        type="tertiary"
        :label="buttonLabel"
        :id="id + '_action_button'"
        @action="action"
      ></c-button>
      <!-- anchor tag  to render on right side of collapsible section -->
      <c-anchor-tag
        v-if="tabLink && showSection"
        :label="tabLink.label"
        :id="id + '_action_link'"
        :action="action"
      ></c-anchor-tag>
    </div>
    <!-- content to render in collapsible section -->
    <div class="mt-5 text-sm text-gray-500" v-if="showSection">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import CIcon from "../CIcon/CIcon.vue";
import CButton from "../CButton/CButton.vue";
import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
export default {
  name: "CCollapsibleSection",
  components: { CIcon, CButton, CAnchorTag },
  props: {
    // label of section
    label: {
      type: String,
    },
    // id of section
    id: {
      type: String,
    },
    // text to render on tertiary button
    buttonLabel: {
      type: String,
    },
    badgeCount: {
      type: Number,
      default: 0,
    },
    // whether to show the divider below section heading
    divider: {
      type: Boolean,
    },
    isCollapsed: {
      type: Boolean,
      default: true,
    },
    // to render button on right side of section heading
    tabAction: { type: Boolean },
    // link to render on right side of section
    tabLink: { type: Object },
    // action to emit on click of link/button
    action: {
      type: Function,
    },
    isRequired: {
      type: Boolean,
      default: false,
    },
    customHeaderClass: {
      type: String,
      default: " text-base font-semibold text-gray-900",
    },
  },
  data() {
    return {
      showSection: this.isCollapsed,
    };
  },
  methods: {
    collapse() {
      this.showSection = !this.showSection;
    },
  },
  watch: {
    isCollapsed() {
      this.showSection = this.isCollapsed;
    },
  },
};
</script>

<style></style>
