<script setup lang="tsx">
/** @jsxImportSource vue */
import { ref, onMounted, onUnmounted, watch, defineComponent, PropType, Fragment } from 'vue'
import { motion, useMotionTemplate, useSpring, useTransform, useVelocity,useMotionValue } from 'motion-v'

interface Tab {
  id: string
  label: string
  color: string
  description: string
}

const tabs = [
  {
    id: 'tab-1',
    label: 'Home',
    color: '#ff0088',
    description: 'This is your home tab, where you can see all your recent activity'
  },
  {
    id: 'tab-2', 
    label: 'DMs',
    color: '#dd00ee',
    description: 'This is your DMs tab, where you can see all your recent DMs'
  },
  {
    id: 'tab-3',
    label: 'Activity', 
    color: '#9911ff',
    description: 'This is your Activity tab, where you can see all your recent activity'
  },
  {
    id: 'tab-4',
    label: 'More',
    color: '#0d63f8', 
    description: 'This is your More tab, where you can find a bunch of other stuff, like settings, help, etc.'
  }
]


/**
 * ==============   Utils   ================
 */
 const calculateViewX = (difference: number, containerWidth: number) => {
  return difference * (containerWidth * 0.75) * -1
}

const activeTab = ref(tabs[0].id)
// Render Views only after mount since container width needs to be measured first
const isMounted = ref(false)
const viewsContainerRef = ref<HTMLDivElement | null>(null)
const viewsContainerWidth = ref(0)

onMounted(() => {
  isMounted.value = true
  // Initial measurement
  updateWidth()
  window.addEventListener('resize', updateWidth)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWidth)
})

const updateWidth = () => {
  if (viewsContainerRef.value) {
    viewsContainerWidth.value = viewsContainerRef.value.getBoundingClientRect().width
  }
}

const View = defineComponent({
  props: {
    containerWidth: Number,
    viewIndex: Number,
    activeIndex: Number
  },
  setup(props, { slots }) {
    const difference = ref(props.activeIndex! - props.viewIndex!)
    const calcX = useMotionValue(calculateViewX(difference.value!, props.containerWidth!))

    watch([() => props.activeIndex, () => props.containerWidth], () => {
      const newDifference = props.activeIndex! - props.viewIndex!
      difference.value = newDifference
      calcX.set(calculateViewX(newDifference, props.containerWidth!))
    })

    const x = useSpring(calcX, {
      stiffness: 400,
      damping: 60
    })

    const xVelocity = useVelocity(x)

    const opacity = useTransform(
      x,
      [-props.containerWidth! * 0.6, 0, props.containerWidth! * 0.6],
      [0, 1, 0]
    )

    const blur = useTransform(xVelocity, [-1000, 0, 1000], [4, 0, 4], {
      clamp: false
    })
    const filter = useMotionTemplate`blur(${blur}px)`

    return () => (
      <motion.div
        class="view-outer-container"
        style={{
          x: x,
          opacity: opacity,
          filter: filter
        }}
      >
        <div class="view-inner-container">
          {slots.default?.()}
        </div>
      </motion.div>
    )
  }
})

const Tabs = defineComponent({
  props: {
    tabs: {
      type: Array as PropType<Tab[]>,
      required: true
    },
    activeTab: {
      type: String,
      required: true
    }
  },
  emits: ['update:activeTab'],
  setup(props, { emit }) {
    return () => (
      <ul class="tabs-container">
        {props.tabs.map((tab) => (
          <motion.li
            key={tab.id}
            class="tab-outer"
            style={{
              padding:'4px 4px 4px 0px'
            }}
          >
            <motion.button
              class={`tab-inner ${props.activeTab === tab.id ? 'active' : ''}`}
              whileFocus={{
                outline: '2px solid var(--accent)'
              }}
              onClick={() => emit('update:activeTab', tab.id)}
            >
              <span class={`tab-label ${props.activeTab === tab.id ? 'active' : ''}`}>
                {tab.label}
              </span>

              {tab.id === props.activeTab && (
                <motion.span
                  layoutId="activeTab"
                  id="activeTab"
                  transition={{
                    type: 'spring',
                    stiffness: 600,
                    damping: 40
                  }}
                  class="tab-active-bg"
                  style={{
                    backgroundColor: tab.color
                  }}
                />
              )}
            </motion.button>
          </motion.li>
        ))}
      </ul>
    )
  }
})

const DummyTabContent = defineComponent({
  props: {
    tab: {
      type: Object as PropType<Tab>,
      required: true
    }
  },
  setup(props) {
    return () => (
      <Fragment>
        <div class="dummy-tab-content-title-container">
          <span
            class="dummy-tab-content-icon"
            style={{
              backgroundColor: props.tab.color
            }}
          />
          <h3 class="dummy-tab-content-title">{props.tab.label}</h3>
        </div>
        <p class="dummy-tab-content-description">{props.tab.description}</p>
      </Fragment>
    )
  }
})
</script>

<template>
  <div class="container">
    <div
      id="views-container"
      ref="viewsContainerRef"
      class="views-container"
    >
      <template v-if="isMounted">
        <View
          v-for="(tab, idx) in tabs"
          :key="tab.id"
          :container-width="viewsContainerWidth"
          :view-index="idx"
          :active-index="tabs.findIndex(t => t.id === activeTab)"
        >
          <DummyTabContent :tab="tab" />
        </View>
      </template>
    </div>
    <Tabs
      :tabs="tabs"
      v-model:active-tab="activeTab"
    />
  </div>
</template>

<style>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
  min-width: 280px;
  width: clamp(280px, 90dvw, 400px);
  height: 100%;
}

.views-container {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 300px;
  border: 1px solid #1d2628;
  background-color: var(--layer-transparent);
  backdrop-filter: blur(10px);
  border-radius: 12px;
}

.view-outer-container {
  position: absolute;
  inset: 0;
  padding: 8px;
  transform-origin: center;
  transform: translate3d(0, 0, 0);
  will-change: transform, filter;
  isolation: isolate;
}

.view-inner-container {
  width: 100%;
  height: 100%;
  padding: 32px 36px;
  box-sizing: border-box;
  text-wrap: balance;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tabs-container {
  border: 1px solid #1d2628;
  background-color: var(--layer-transparent);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  display: flex;
  padding: 0px;
  width: 100%;
  margin: 0px;
}

.tab-outer {
  display: flex;
  cursor: pointer;
  flex-grow: 1;
}

.tab-inner {
  position: relative;
  width: 100%;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 8px;
  color: var(--feint-text);
}

.tab-inner.active {
  color: #f5f5f5;
}

.tab-label {
  z-index: 1;
  color: var(--feint-text);
}

.tab-label.active {
  color: #f5f5f5;
}

.tab-active-bg {
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.dummy-tab-content-title-container {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dummy-tab-content-icon {
  height: 20px;
  width: 20px;
  border-radius: 16px;
}

.dummy-tab-content-title {
  margin: 0px;
}

.dummy-tab-content-description {
  color: var(--feint-text);
}
</style>