<template>
  <div class="vin-location-information mt-2 mb-3">
    <div
      class="vin-toggle"
      :class="[isVinLocationDetailVisible ? 'active' : '']"
      @click="handleClickToggle">
      <textLink
        linkType="text"
        href="#!"
        :text="textForToggle" />
    </div>
    <Transition>
      <div
        v-show="isVinLocationDetailVisible"
        id="vin-location-detail-wrapper"
        class="mt-2">
        <div
          id="vin-location-detail-content"
          class="mb-2"
          v-html="vinLocationDetailContent" />
        <img
          :src="vinLocationDetailImage"
          alt="VIN Locations">
      </div>
    </Transition>
  </div>
</template>
<script>
import textLink from '@/ux-components/text-link/text-link.vue';

export default {
    name: 'vin-location-information',
    components: {
        textLink
    },
    data() {
        return {
            isVinLocationDetailVisible: false
        };
    },
    computed: {
        textForToggle() {
            return this.getCmsContent('WhereCanIFindMyVINToggle', 'HeaderText');
        },
        vinLocationDetailContent() {
            return this.getCmsContent('WhereCanIFindMyVINToggle', 'BodyText');
        },
        vinLocationDetailImage() {
            return this.getCmsContent('WhereCanIFindMyVINToggle', 'Image');
        }
    },
    methods: {
        handleClickToggle() {
            this.isVinLocationDetailVisible = !this.isVinLocationDetailVisible;
        }
    }
};
</script>
<style lang="scss">
  .vin-location-information {
    .vin-toggle {
      &::after {
        content: "";
        transition: all 0.5s ease;
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.9' xml:space='preserve'%3e%3cpath d='M8 8.9c-.2 0-.5-.1-.6-.3L.3 1.5C.1 1.4 0 1.1 0 .9 0 .7.1.4.3.3.4.1.7 0 .9 0c.2 0 .5.1.6.3L8 6.7 14.5.2c.1-.1.4-.2.6-.2.2 0 .5.1.6.3s.3.4.3.6c0 .2-.1.5-.3.6L8.6 8.6c-.1.2-.4.3-.6.3z' fill='%231474a2'/%3e%3c/svg%3e");
        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;
      }
    }
  }
  #vin-location-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%;
    }
  }
  #vin-location-detail-content {
    font-size: 0.875rem;
    p {
      font-size: 0.875rem;
      margin-bottom: 0;
    }
    ol {
      margin-top: 0.5rem;
      margin-bottom: 0;
    }
  }
</style>
