<template>
  <div
    :class="[
      {
        'is-active': isOpen,
        'is-disabled': disabled,
        'is-border': hasBorder
      },
      `border-${colorBorder}`
    ]"
    class="vc-collapse-item"
  >
    <div class="vc-collapse-item__header-wrap">
      <div
        :class="headerClass"
        :tabindex="disabled ? null : 0"
        class="vc-collapse-item__header"
        role="button"
        @click="toggle"
        @keydown.enter="onKeydown"
      >
        <slot
          name="title"
          :open="isOpen"
        >
          <div class="vc-collapse-item__header-content">
            {{ title }}
          </div>
        </slot>
        <div
          class="vc-collapse-item__header-actions"
        >
          <slot
            :open="isOpen"
            name="icon"
          >
            <span
              :class="{ 'expanded': isOpen }"
              class="action-icon"
            >
              <i
                :class="[`text-${colorIcon}`]"
                class="vc-icon-down"
              />
            </span>
          </slot>
        </div>
      </div>
    </div>
    <VcCollapseTransition>
      <div
        v-show="isOpen"
        class="vc-collapse-item__content-wrap"
      >
        <div
          :class="bodyClass"
          class="vc-collapse-item__content"
        >
          <slot>
            {{ content }}
          </slot>
        </div>
      </div>
    </VcCollapseTransition>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import VcCollapseTransition from '@/components/VcCollapse/VcCollapseTransition.vue'

export default defineComponent({
  name: 'VcCollapseItem',
  components: { VcCollapseTransition },
  inject: {
    collapse: {
      from: 'collapse',
      default: () => null
    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    name: {
      type: String,
      default: ''
    },
    headerClass: {
      type: String,
      default: ''
    },
    bodyClass: {
      type: String,
      default: ''
    },
    colorIcon: {
      type: String,
      default: 'active-elements'
    },
    colorBorder: {
      type: String,
      default: 'ui-lines'
    },
    hasBorder: {
      type: Boolean,
      default: true
    },
    activeNames: {
      type: Array as PropType<string[]>,
      default: undefined
    }
  },
  emits: ['update:activeName'],
  data () {
    return {
      open: false
    }
  },
  computed: {
    isOpen () {
      return !this.parentCollapse?.localModel ? this.open : this.parentCollapse.localModel.includes(this.name)
    },
    parentCollapse () {
      // eslint-disable-next-line
      return (this as any).collapse || null
    }
  },
  watch: {
    activeNames: {
      immediate: true,
      handler (val: string[] | undefined) {
        if (val && !this.name) {
          console.error('property name is required!')
        }
      }
    }
  },
  methods: {
    toggle () {
      if (!this.disabled) {
        this.open = !this.open
        const res = {
          name: this.name || '',
          state: !this.isOpen
        }
        this.$emit('update:activeName', res)
        if (this.parentCollapse) {
          this.parentCollapse.setActiveName(res)
        }
      }
    },
    onKeydown () {
      this.toggle()
    }
  }
})
</script>

<style lang="scss" scoped>
  .vc-collapse-item {
    @apply w-full;
    &__header-wrap {
      @apply flex items-center w-full
      overflow-hidden;
    }
    &__header {
      @apply
      text-default-text
      flex justify-between
      items-center
      cursor-pointer
      select-none
      py-3
      w-full
      overflow-hidden
      outline-none
      ;
      &-content {
        @apply flex-grow flex-shrink-0;
      }
      &-actions {
        @apply flex-shrink-0 flex justify-center items-center;
        min-width: 20px;
        .action-icon {
          @apply flex items-center justify-center text-2xl;
          transition: all .28s ease;
          &.expanded {
            @apply transform rotate-180;
          }
        }
      }
      &:focus-visible {
        @apply bg-active-elements-bg--focus text-active-elements--focus;
      }
    }
    &__content-wrap {
      transition: all .28s ease;
    }
    &__content {
      @apply pb-4 text-default-text;
    }
    &.is-border {
      @apply border-b;
    }
    &.is-disabled {
      .vc-collapse-item__header {
        @apply cursor-not-allowed text-inactive-elements;
        .vc-collapse-item__header-actions {
          .action-icon i {
            @apply text-inactive-elements;
          }
        }
      }
    }
  }
</style>
