<template>
  <div class="split-text-demo">
    <TabbedLayout>
      <template #preview>
        <div class="demo-container">
          <RefreshButton @refresh="forceRerender" />

          <SplitText :key="rerenderKey" text="Hello, Vue!" :delay="delay" :duration="duration" :ease="ease"
            :split-type="splitType" :threshold="threshold" class="split-text-demo-text"
            @animation-complete="() => { showCallback && showToast() }" />
        </div>

        <Customize>
          <PreviewSwitch title="Show Completion Toast" v-model="showCallback" @update:model-value="forceRerender" />

          <PreviewSlider title="Stagger Delay (ms)" v-model="delay" :min="10" :max="500" :step="10"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Duration (s)" v-model="duration" :min="0.1" :max="2" :step="0.1"
            @update:model-value="forceRerender" />

          <PreviewSlider title="Threshold" v-model="threshold" :min="0.1" :max="1" :step="0.1"
            @update:model-value="forceRerender" />
        </Customize>

        <PropTable :data="propData" />
        <Dependencies :dependency-list="['gsap']" />
      </template>

      <template #code>
        <CodeExample :code-object="splitText" />
      </template>

      <template #cli>
        <CliInstallation :command="splitText.cli" />
      </template>
    </TabbedLayout>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import TabbedLayout from '../../components/common/TabbedLayout.vue'
import RefreshButton from '../../components/common/RefreshButton.vue'
import PropTable from '../../components/common/PropTable.vue'
import Dependencies from '../../components/code/Dependencies.vue'
import CliInstallation from '../../components/code/CliInstallation.vue'
import CodeExample from '../../components/code/CodeExample.vue'
import Customize from '../../components/common/Customize.vue'
import PreviewSwitch from '../../components/common/PreviewSwitch.vue'
import PreviewSlider from '../../components/common/PreviewSlider.vue'
import SplitText from '../../content/TextAnimations/SplitText/SplitText.vue'
import { splitText } from '@/constants/code/TextAnimations/splitTextCode'
import { useToast } from 'primevue/usetoast'
import { useForceRerender } from '@/composables/useForceRerender'

const delay = ref(10)
const duration = ref(2)
const ease = ref('elastic.out(1, 0.3)')
const splitType = ref<'chars' | 'words' | 'lines' | 'words, chars'>('chars')
const threshold = ref(0.1)
const showCallback = ref(true)
const toast = useToast()
const { rerenderKey, forceRerender } = useForceRerender()

const showToast = () => {
  toast.add({
    severity: 'secondary',
    summary: 'Animation Finished!',
    life: 3000
  })
}

const propData = [
  { name: 'text', type: 'string', default: '""', description: 'The text content to animate.' },
  { name: 'className', type: 'string', default: '""', description: 'Additional class names to style the component.' },
  { name: 'delay', type: 'number', default: '100', description: 'Delay between animations for each letter (in ms).' },
  { name: 'duration', type: 'number', default: '0.6', description: 'Duration of each letter animation (in seconds).' },
  { name: 'ease', type: 'string', default: '"power3.out"', description: 'GSAP easing function for the animation.' },
  { name: 'splitType', type: 'string', default: '"chars"', description: 'Split type: "chars", "words", "lines", or "words, chars".' },
  { name: 'from', type: 'object', default: '{ opacity: 0, y: 40 }', description: 'Initial GSAP properties for each letter/word.' },
  { name: 'to', type: 'object', default: '{ opacity: 1, y: 0 }', description: 'Target GSAP properties for each letter/word.' },
  { name: 'threshold', type: 'number', default: '0.1', description: 'Intersection threshold to trigger the animation (0-1).' },
  { name: 'rootMargin', type: 'string', default: '"-100px"', description: 'Root margin for the ScrollTrigger.' },
  { name: 'textAlign', type: 'string', default: '"center"', description: 'Text alignment: "left", "center", "right", etc.' },
  { name: 'onLetterAnimationComplete', type: 'function', default: 'undefined', description: 'Callback function when all animations complete.' }
]
</script>