<template>
  <div class="transitions-playground row w-100 h-100 justify-content-start">
    <div class="col col-auto">
      <button type="button" class="btn btn-primary mb-2" @click="slideUpDown()">Slide Up/Down</button>
      <SlideInOut vertical bottom duration="0.5s">
        <div v-show="slideUpDownVisible">
          <img src="https://picsum.photos/200/300" />
        </div>
      </SlideInOut>
    </div>
    <div class="col col-auto">
      <button type="button" class="btn btn-primary mb-2" @click="slideDownUp()">Slide Down/Up</button>
      <SlideInOut vertical duration="0.5s">
        <div v-show="slideDownUpVisible">
          <img src="https://picsum.photos/200/300" />
        </div>
      </SlideInOut>
    </div>
    <div class="col col-auto">
      <button type="button" class="btn btn-primary mb-2" @click="slideLeftRight()">Slide Left/Right</button>
      <SlideInOut duration="0.5s" right>
        <div v-show="slideLeftRightVisible">
          <img src="https://picsum.photos/300/200" />
        </div>
      </SlideInOut>
    </div>
    <div class="col col-auto">
      <button type="button" class="btn btn-primary mb-2" @click="slideRightLeft()">Slide Right/Left</button>
      <SlideInOut duration="0.5s">
        <div v-show="slideRightLeftVisible">
          <img src="https://picsum.photos/300/200" />
        </div>
      </SlideInOut>
    </div>
    <div class="col col-auto">
      <button type="button" class="btn btn-primary mb-2" @click="fadeInOut()">Fade In/Out</button>
      <FadeInOut duration="1s">
        <div v-show="fadeVisible">
          <img src="https://picsum.photos/400/400" />
        </div>
      </FadeInOut>
    </div>
    <div class="col">&nbsp;</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { SlideInOut, FadeInOut } from '../components/transitions';

const slideUpDownVisible = ref(false);
const slideDownUpVisible = ref(false);
const slideLeftRightVisible = ref(false);
const slideRightLeftVisible = ref(false);
const fadeVisible = ref(false);
const slideUpDown = () => (slideUpDownVisible.value = !slideUpDownVisible.value);
const slideDownUp = () => (slideDownUpVisible.value = !slideDownUpVisible.value);
const slideLeftRight = () => (slideLeftRightVisible.value = !slideLeftRightVisible.value);
const slideRightLeft = () => (slideRightLeftVisible.value = !slideRightLeftVisible.value);
const fadeInOut = () => (fadeVisible.value = !fadeVisible.value);
</script>

<style lang="scss">
.transitions-playground {
  position: relative;
  overflow: hidden;
}
</style>
