<script setup lang="ts">
import Tiktok from "../svg/Marketing/Tiktok.vue";
import TiktokActive from "../svg/Marketing/TiktokActive.vue";
import Meta from "../svg/Marketing/Meta.vue";
import MetaActive from "../svg/Marketing/MetaActive.vue";
import SnapChat from "../svg/Marketing/SnapChat.vue";
import SnapChatActive from "../svg/Marketing/SnapChatActive.vue";
import GoogleAds from "../svg/Marketing/GoogleAds.vue";
import GoogleAdsActive from "../svg/Marketing/GoogleAdsActive.vue";
import type { MarketingPlatform } from "~/types/Marketing";

const { locale } = useI18n();

const props = defineProps<{
  tabs: MarketingPlatform[];
}>();

const dir = computed(() => (locale.value === "ar" ? "rtl" : "ltr"));

const selectedTab = ref<string>("");

const defaultTabValue = computed(() => {
  return props.tabs && props.tabs.length > 0 ? props.tabs[0].key : "";
});

if (!selectedTab.value && defaultTabValue.value) {
  selectedTab.value = defaultTabValue.value;
}

const icons = {
  Tiktok: Tiktok,
  TiktokActive: TiktokActive,
  Meta: Meta,
  MetaActive: MetaActive,
  SnapChat: SnapChat,
  SnapChatActive: SnapChatActive,
  GoogleAds: GoogleAds,
  GoogleAdsActive: GoogleAdsActive,
};
</script>

<template>
  <Tabs
    v-if="tabs && tabs.length > 0"
    v-model="selectedTab"
    :dir="dir"
    :default-value="defaultTabValue"
    class="w-full"
  >
    <TabsList
      class="mx-auto mb-8 flex items-center gap-[24px] bg-transparent sm:gap-[48px]"
    >
      <TabsTrigger
        v-for="tab in tabs"
        :key="tab.key"
        :aria-label="tab.key"
        :value="tab.key"
        class="group bg-surface-background dark:data-[state=active]:bg-surface-background-reverse data-[state=active]:bg-surface-background-reverse dur flex h-[56px] w-[56px] items-center justify-center rounded-full drop-shadow-[0_1px_3px_rgba(166,175,195,0.40)] data-[state=active]:drop-shadow-none dark:drop-shadow-none"
      >
        <component
          :is="icons[tab.icon]"
          class="!h-[32px] !w-[32px] group-data-[state=active]:hidden"
        />
        <component
          :is="icons[`${tab.icon}Active`]"
          class="!h-[32px] !w-[32px] group-data-[state=inactive]:hidden"
        />
      </TabsTrigger>
    </TabsList>

    <TabsContent
      v-for="tab in tabs"
      :key="tab.key"
      :value="tab.key"
      class="mx-auto w-full overflow-hidden xl:max-w-[1190px]"
    >
      <Transition name="tab-content" mode="out-in" appear>
        <div
          v-if="selectedTab === tab.key"
          class="bg-surface-background border-surface-border grid w-full gap-[16px] rounded-[2rem] border p-[16px] lg:grid-cols-2"
        >
          <div
            v-for="image in tab.items"
            :key="image.id"
            class="relative h-full w-full overflow-hidden rounded-[16px] lg:max-h-[290px]"
          >
            <NuxtImg
              :src="image.url"
              :alt="image.alt"
              class="h-full w-full rounded-[16px] object-cover"
              loading="lazy"
              :width="571"
              :height="286"
              preset="default"
            />
          </div>
        </div>
      </Transition>
    </TabsContent>
  </Tabs>
</template>

<style scoped>
.tab-content-enter-active,
.tab-content-leave-active {
  transition: all 0.3s ease-in-out;
}
.tab-content-enter-from {
  opacity: 0;
  transform: translateY(16px);
}
.tab-content-leave-to {
  opacity: 0;
  transform: translateY(-16px);
}
.tab-content-enter-to,
.tab-content-leave-from {
  opacity: 1;
  transform: translateY(0);
}
</style>
