<template>
    <div class="vin-information">
        <div class="vin-toggle" :class="[isActive ? 'active' : '']" @click="toggleClass()">
            <textLink linkType="text" href="#!" :text="WhereCanIFindMyVINHeadline" />
        </div>
        <div class="vin-info">
            <div class="mt-2" v-html="WhereCanIFindMyVINBodyCopy"></div>
            <img :src="WhereCanIFindMyVINImage" alt="" />
        </div>
    </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
//Supporting files
import { settleAllPromises } from "@/helpers/layout-helper";
export default {
    name: "vinInformation",
    components: {
        textLink,
    },
    data() {
        return {
            isActive: false,
        };
    },
    methods: {
        toggleClass: function (event) {
            this.isActive = !this.isActive;
        },
    },
    computed: {
        WhereCanIFindMyVINHeadline() {
            return this.getCmsContent("WhereCanIFindMyVINToggle", "HeaderText");
        },
        WhereCanIFindMyVINBodyCopy() {
            return this.getCmsContent("WhereCanIFindMyVINToggle", "BodyText");
        },
        WhereCanIFindMyVINImage() {
            return this.getCmsContent("WhereCanIFindMyVINToggle", "Image");
        },
    },
};
</script>

<style lang="scss">
.vin-information {
    p,
    li {
        font-size: 0.875rem;
        color: $gray-600;
    }
    li {
        line-height: 26px;
    }
    a {
        font-size: 0.875rem;
        text-decoration: none;
    }
    .vin-toggle {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        &:after {
            content: "";
            transition: all 0.5s ease;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath fill='%230070D1' d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm6.113 11.28-5.52 5.52a.84.84 0 0 1-1.186 0l-5.52-5.52a.843.843 0 1 1 1.186-1.2L12 15.012l4.927-4.932a.843.843 0 1 1 1.186 1.2Z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right center;
            margin-left: 0.5rem;
            width: 24px;
            height: 24px;
            display: inline-flex;
        }
        &.active:after {
            transform: rotate(180deg);
        }
        &.active + .vin-info {
            max-height: 500px;
            transition: all 250ms ease-in;
            opacity: 1;
            visibility: visible;
        }
        a {
            text-decoration: none;
            font-family: UrbanistSemibold, Arial, Helvetica, sans-serif;
        }
    }
    .vin-info {
        max-height: 0;
        transition: all 250ms ease-out;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        p {
            margin-bottom: 0.5rem;
        }
        img {
            max-width: 100%;
            width: 117%;
            height: auto;
        }
    }
}
</style>
