<template>
  <li class="faq-item">
    <div
      :class="wrapperClasses"
      @click="this.$emit('toggle')"
    >
      <div :class="dropdownIconClasses" class="faq-item__icon-prepend">
        <slot name="prepend:icon">
          <img
            :src="buttonIcon"
            width="9"
            height="16"
            loading="lazy"
            alt="arrow-icon"
          />
        </slot>
      </div>
      <div :class="questionClasses" class="faq-item__question">
        <slot
          name="question"
          :question="item.question"
        >
          {{ item.question }}
        </slot>
      </div>
      <div :class="dropdownIconClasses" class="faq-item__icon-append">
        <slot name="append:icon" />
      </div>
    </div>
    <div v-show="isActive" :class="itemContentClasses">
      <div class="answer links-underline" v-html="item.answer" />
      <ArrowLink
        v-if="item.link"
        target="_blank"
        class="read-more mt-24 text-orange-700"
        :path="item.link">
        Read more
      </ArrowLink>
    </div>
  </li>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { IFaq } from '@/components/blocks/Faq/Faq.types';
import ArrowLink from '@/components/ui/ArrowLink.vue';
import buttonIcon from '@/assets/img/static-icons/arrow/arrow-right-orange.svg?url';

export default defineComponent({
  components: { ArrowLink },

  props: {
    item: {
      type: Object as PropType<IFaq.Item>,
      required: true,
    },
    isActive: Boolean,
  },

  emits: ['open'],

  data: () => ({
    buttonIcon,
  }),

  computed: {
    wrapperClasses() {
      const baseClasses = `
       heading flex items-center
       w-fit py-16 px-32 text-gray-1200
       font-semi-bold text-18 gap-16
       bg-white rounded-48 cursor-pointer`;

      return [baseClasses, {
        'mb-24 bg-gray-1200 cursor-default': this.isActive
      }];
    },

    dropdownIconClasses() {
      const baseClasses = 'transition-transform';
      return [baseClasses, { 'rotate-90': this.isActive }];
    },

    questionClasses() {
      const baseClasses = 'text-18';
      const activeClasses = 'text-white'
      const inactiveClasses = 'text-gray-1200';

      return [
        baseClasses,
        this.isActive
          ? activeClasses
          : inactiveClasses
      ]
    },

    itemContentClasses() {
      const baseClasses = `
        content max-w-xl overflow-hidden
        text-gray-800 rounded-16 cursor-default
        animate-content-open`;

      const activeClasses = 'p-32 text-16 border-1 border-solid border-b-gray-400';
      const inactiveClasses = 'px-32';

      return [
        baseClasses,
        this.isActive
          ? activeClasses
          : inactiveClasses,
      ]
    }
  },
});
</script>
