<!--
    Describe this component...
-->
<template>
    <px-flex :class="bem()" vertical style="height: 100%" gap="1">
        <px-flex justify="center" gap="1">
            <button @click="clickPrev">Previous</button>
            <button @click="clickNext">Next</button>
            <px-toggle v-model:checked="nested">Nested</px-toggle>
        </px-flex>
        <px-slides :style="{ flex: 1 }" ref="slides" :items="fruits" items-key-property="id">
            <template #slide="{ item, index }">
                <!-- NESTED -->
                <div v-if="nested && index == 0" :class="bem('nested')">
                    <img
                        data-drag
                        :src="item.image"
                        :style="{
                            aspectRatio: 1,
                            width: '50vw',
                            objectFit: 'cover',
                            borderRadius: '50%',
                        }"
                    />

                    <px-slides :items="fruits" items-key-property="id">
                        <template #slide="{ item, index }">
                            <div :class="bem('item')">
                                <div>
                                    <h1>NESTED {{ item.name }} {{ index }}</h1>
                                </div>

                                <img
                                    data-drag
                                    :src="item.image"
                                    :style="{
                                        aspectRatio: 1,
                                        width: '50vw',
                                        objectFit: 'cover',
                                        borderRadius: '50%',
                                    }"
                                />
                            </div>
                        </template>
                    </px-slides>
                </div>

                <!-- NORMAL -->
                <div v-else :class="bem('item')">
                    <div>
                        <h1>{{ item.name }} {{ index }}</h1>
                    </div>

                    <img
                        data-drag
                        :src="item.image"
                        :style="{
                            aspectRatio: 1,
                            width: '50vw',
                            objectFit: 'cover',
                            borderRadius: '50%',
                        }"
                    />
                </div>
            </template>
            <!-- <template #item="{ item, index, dragX }">
                <div :class="bem('item')" :style="{ transform: `translate(${dragX}px, 0)` }">
                    <px-card :class="bem('card')">
                        <div :class="bem('no-swiping')">(no swiping)</div>
                        <p>{{ item.name }} ({{ index }})</p>
                        <div
                            :class="bem('graphic')"
                            :style="{
                                backgroundColor: item.color,
                            }"
                        ></div>
                    </px-card>
                </div>
            </template> -->
        </px-slides>
    </px-flex>
</template>

<script>
import PxFlex from '../../components/PxFlex.vue';
import PxSlides from '../../components/PxSlides.vue';
import PxToggle from '../../components/PxToggle.vue';

import random from '../data/random.js';

export default {
    name: 'demo-px-slides',
    components: { PxSlides, PxFlex, PxToggle },
    // mixins: [ Mixin ],
    // props: { a: { type: Boolean, default: false } },
    data() {
        return { fruits: [], nested: false };
    },
    // computed: {},
    // watch: {},
    mounted() {
        this.fruits = random.randomFruits(3);
    },
    methods: {
        clickPrev() {
            this.$refs.slides.previous();
        },
        clickNext() {
            this.$refs.slides.next();
        },
    },
};
</script>

<style lang="scss">
@use '../../styles/px.scss' as *;

.demo-px-slides {
    padding: 10px;
    gap: 10px;

    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    height: 100%;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    // min-height: 300vh;
    border: 5px solid hotpink;

    &__nested {
        background-color: gold;
        font-size: 10px;
        opacity: 0.5;
        display: flex;
        > * {
            flex: 1;
        }
    }
}
</style>
