<script setup lang="ts">
import { useQuasar } from 'quasar'
import type { PropType } from 'vue'

type ModeOptions = 'in-out' | 'out-in' | 'default' | undefined
type RenderOptions =
  | 'never'
  | 'always'
  | 'xs'
  | 'sm'
  | 'sm-down'
  | 'sm-up'
  | 'md'
  | 'md-down'
  | 'md-up'
  | 'lg'
  | 'lg-down'
  | 'lg-up'
  | 'xl'
  | undefined

const quasar = useQuasar()
const props = defineProps({
  fallback: {
    type: String,
    default: '',
  },
  render: {
    type: String as PropType<RenderOptions>,
    default: 'always',
  },
  appear: {
    type: Boolean,
    default: false,
  },
  mode: {
    type: String as PropType<ModeOptions>,
    default: 'out-in',
  },
  enter: {
    type: String,
    default: 'animate__fadeIn',
  },
  leave: {
    type: String,
    default: 'animate__fadeOut',
  },
})

const render = computed(() => {
  switch (props.render) {
    case 'never':
      return false
    case 'always':
      return true
    case 'xs':
      return quasar.screen.xs
    case 'sm':
      return quasar.screen.sm
    case 'sm-down':
      return quasar.screen.xs || quasar.screen.sm
    case 'sm-up':
      return !quasar.screen.xs
    case 'md':
      return quasar.screen.md
    case 'md-down':
      return !quasar.screen.lg && !quasar.screen.xl
    case 'md-up':
      return !quasar.screen.xs && !quasar.screen.sm
    case 'lg':
      return quasar.screen.lg
    case 'lg-down':
      return !quasar.screen.xl
    case 'lg-up':
      return quasar.screen.lg || quasar.screen.xl
    case 'xl':
      return quasar.screen.xl
    default:
      return false
  }
})
</script>

<template>
  <ClientOnly>
    <template #fallback>{{ props.fallback }}</template>

    <Transition
      :appear="props.appear"
      :mode="props.mode"
      :enter-active-class="`animate__animated ${props.enter}`"
      :leave-active-class="`animate__animated ${props.leave}`"
    >
      <slot v-if="(quasar.screen.width || quasar.screen.height) && render" />
    </Transition>
  </ClientOnly>
</template>
