<template>
    <div class="tech-notes">
        <div class="tech-notes-toggle" :class="{ active: isActive }" @click="toggleClass">
            <textLink linkType="text" href="#!" :text="textAreaLabelCopy" />
        </div>
        <div class="tech-notes-content">
            <textareaQuestion
                ref="techNotes"
                class="mb-4"
                v-model="localTechNotes"
                cmsWidgetName="TextAreaContentWidget"
                :textAreaLabelCopy="textAreaLabelCopy"
                maxLength="150" />
        </div>
    </div>
</template>

<script>
import textLink from "@/ux-components/text-link/text-link";
import textareaQuestion from "@/digital-components/textarea-question/textarea-question";

export default {
    name: "techNotes",
    components: {
        textLink,
        textareaQuestion,
    },
    props: {
        modelValue: {
            type: String,
            required: true,
        },
        textAreaLabelCopy: {
            type: String,
            required: true,
        },
    },
    computed: {
        localTechNotes: {
            get() {
                return this.modelValue;
            },
            set(value) {
                this.$emit("update:modelValue", value);
            },
        },
    },
    data() {
        return {
            isActive: false,
        };
    },
    methods: {
        toggleClass() {
            this.isActive = !this.isActive;
        },
    },
};
</script>

<style lang="scss">
.tech-notes {
    .tech-notes-toggle {
        cursor: pointer;
        &: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;
            background-position: right center;
            margin-left: 0.5rem;
            width: 16px;
            height: 9px;
            display: inline-flex;
        }
        &.active:after {
            transform: rotate(180deg);
        }
        &.active + .tech-notes-content {
            max-height: 500px;
            transition: all 250ms ease-in;
            opacity: 1;
            visibility: visible;
        }
    }
    .tech-notes-content {
        max-height: 0;
        transition: all 250ms ease-out;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
    }
}
</style>
