<template>
    <div class="tpa-recal-toggle mt-2 mb-3">
      <textLink
        id="moreDetails"
        class="d-inline-block"
        linkType="text"
        href="#!"
        :text="textForToggle"
        @click="handleClickToggle" />
      <div
        class="tpa-toggle d-inline-block"
        :class="[isDetailVisible ? 'active' : '']"
        @click="handleClickToggle"></div>
      <Transition>
        <div
          v-show="isDetailVisible"
          id="tpa-recal-detail-wrapper"
          class="mt-2">
          <div
            id="tpa-recal-detail-content"
            class="mb-2"
            v-html="detailContent" />
        </div>
      </Transition>
    </div>
  </template>
<script>
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'tpa-recal-toggle',
    components: {
        textLink
    },
    props: {
        cmsWidgetName: String
    },
    data() {
        return {
            isDetailVisible: false
        };
    },
    computed: {
        textForToggle() {
            return this.getCmsContent(this.cmsWidgetName, 'HeaderText');
        },
        detailContent() {
            return this.getCmsContent(this.cmsWidgetName, 'BodyText');
        }
    },
    methods: {
        handleClickToggle() {
            this.isDetailVisible = !this.isDetailVisible;
        }
    }
};
</script>
<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";
  .tpa-recal-toggle {
    .tpa-toggle {
      cursor: pointer;

      &::after {
        content: "";
        transition: all 0.5s ease;
        background-image: url($svg-tpa-recal-modal-toggle);
        background-repeat: no-repeat;
        margin-left: 0.5rem;
        width: 16px;
        height: 9px;
        display: inline-block;
      }
      &.active::after {
        transform: rotate(180deg);
      }
      a {
        font-size: 0.875rem;
      }
    }
  }
  #tpa-recal-detail-wrapper {
    // START - Vue Transition
    &.v-enter-active,
    &.v-leave-active {
      transition: opacity 250ms ease-in;
    }

    &.v-enter-from,
    &.v-leave-to {
      opacity: 0;
    }
    // END - Vue Transition

    img {
      width: 100%;
    }
  }
  #tpa-recal-detail-content {
    font-size: 1rem;
    p {
      font-size: 1rem;
      margin-bottom: 0;
    }
    ol {
      margin-top: 0.5rem;
      margin-bottom: 0;
    }
  }
</style>
