<template>
    <f-fieldset name="more-questions">
        <template #label> Vill du svar på mer frågor? </template>

        <f-radio-field v-model="moreQuestions" :value="true"> Ja tack </f-radio-field>

        <i-animate-expand :expanded="moreQuestions">
            <f-fieldset class="indent" name="are-you-sure">
                <template #label> Är du säker? </template>

                <f-radio-field v-model="areYouSure" :value="true"> Ja, visa mer </f-radio-field>

                <i-animate-expand :expanded="areYouSure">
                    <f-text-field v-validation.maxLength class="indent">
                        Vad tyckte du?
                    </f-text-field>
                </i-animate-expand>

                <f-radio-field v-model="areYouSure" :value="false"> Nej tack </f-radio-field>
            </f-fieldset>
        </i-animate-expand>

        <f-radio-field v-model="moreQuestions" :value="false"> Nej tack </f-radio-field>
    </f-fieldset>
</template>

<script>
import { defineComponent } from "vue";
import { IAnimateExpand, FFieldset, FRadioField, FTextField } from "@fkui/vue";

export default defineComponent({
    namne: "IAnimateExpandRadioGroup",
    components: { IAnimateExpand, FFieldset, FRadioField, FTextField },
    data() {
        return {
            moreQuestions: "",
            areYouSure: "",
        };
    },
});
</script>

<template>
    <div>
        <button type="button" @click="isExpanded = !isExpanded">Öppna/stäng animering</button>
        <label><input v-model="isAnimated" type="checkbox" /> Animera</label>
        <label><input v-model="hasOpacity" type="checkbox" /> Opacitet</label>
        <label><input v-model="useVShow" type="checkbox" /> Use v-show instead of v-if</label>
        <select v-model="style" aria-label="Höjd">
            <option value="height: 200px; background: hotpink">200px höjd</option>
            <option value="height: 600px; background: cyan">600px höjd</option>
            <option value="height: 1200px; background: yellow">1200px höjd</option>
        </select>
        <pre>Callback: {{ callbackInfo }}</pre>
        <pre>Finns innehålls-div i DOM: {{ contentDivInDOM }}</pre>

        <i-animate-expand
            :expanded="isExpanded"
            :opacity="hasOpacity"
            :animate="isAnimated"
            :use-v-show="useVShow"
            :before-animation="beforeAnimationCallback"
            :after-animation="afterAnimationCallback"
        >
            <!-- [html-validate-disable-next no-inline-style] -->
            <div ref="content-div" :style="style">Ett animerat innehåll kan visas här.</div>
        </i-animate-expand>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { IAnimateExpand } from "@fkui/vue";

export default defineComponent({
    namne: "IAnimateExpandRecommended",
    components: { IAnimateExpand },
    data() {
        return {
            isExpanded: false,
            isAnimated: true,
            useVShow: false,
            hasOpacity: true,
            style: "height: 200px; background: hotpink",
            callbackInfo: "",
            contentDivInDOM: false,
        };
    },
    methods: {
        beforeAnimationCallback() {
            console.log("Before animation callback");
            this.callbackInfo = "Before animation callback";
        },
        afterAnimationCallback() {
            console.log("After animation callback");
            this.callbackInfo = "After animation callback";

            setTimeout(() => {
                this.contentDivInDOM = this.$el.contains(this.$refs["content-div"]);
            });
        },
    },
});
</script>

<style>
input,
select {
    margin-left: 20px;
}
</style>

<template>
    <div>
        <button type="button" @click="toggle = !toggle">Toggle</button>
        <label><input v-model="opacity" type="checkbox" /> Toning</label>

        <i-animate-expand :opacity="opacity" :expanded="toggle">
            <!-- [html-validate-disable-next no-inline-style] -->
            <div style="background-color: yellow; height: 200px; position: relative"></div>
        </i-animate-expand>
        <i-animate-expand :opacity="opacity" :expanded="!toggle">
            <!-- [html-validate-disable-next no-inline-style] -->
            <div style="background-color: hotpink; height: 300px; position: relative"></div>
        </i-animate-expand>
    </div>
</template>

<script>
import { defineComponent } from "vue";
import { IAnimateExpand } from "@fkui/vue";

export default defineComponent({
    namne: "IAnimateExpandToggleTwo",
    components: { IAnimateExpand },
    data() {
        return {
            toggle: false,
            opacity: false,
        };
    },
});
</script>