<script setup lang="ts">
import SvgSocialFacebookIcon from "~/components/svg/Social/FacebookIcon.vue";
import SvgSocialInstaIcon from "~/components/svg/Social/InstaIcon.vue";
import SvgSocialLinkedinIcon from "~/components/svg/Social/LinkedinIcon.vue";
import SvgSocialSnapIcon from "~/components/svg/Social/SnapIcon.vue";
import SvgSocialTiktokIcon from "~/components/svg/Social/TiktokIcon.vue";
import SvgSocialTwitterIcon from "~/components/svg/Social/TwitterIcon.vue";
import SvgSocialYoutubeIcon from "~/components/svg/Social/YoutubeIcon.vue";
import type { Branch, Country, Service, SocialName } from "~/types/Contact";

defineProps<{
  formTitle: string;
  branches: Branch[];
  branchesLoading: boolean;
  socialIcons: SocialName[];
  services: Service[];
}>();

const socialIconComponents = {
  snapchat: SvgSocialSnapIcon,
  facebook: SvgSocialFacebookIcon,
  instagram: SvgSocialInstaIcon,
  tiktok: SvgSocialTiktokIcon,
  X: SvgSocialTwitterIcon,
  linkedIn: SvgSocialLinkedinIcon,
  youtube: SvgSocialYoutubeIcon,
};
</script>
<template>
  <div class="container mx-auto px-4">
    <SectionHeadline :title="formTitle" class="!4" />
    <div class="grid grid-cols-1 items-center justify-center xl:grid-cols-2">
      <div class="relative z-10">
        <div
          class="bg-background border-surface-border relative z-20 h-full rounded-[12px] border p-5 sm:p-8"
        >
          <div class="mb-[24px] flex flex-col items-center gap-2">
            <SvgContactIcon class="text-center" />
            <h3
              class="dark-text-gradient text-center text-[24px] leading-[32px]"
            >
              {{ $t("contactSection.formTitle") }}
            </h3>
          </div>
          <ContactForm :services="services" />
        </div>

        <div
          class="bg-background border-surface-border absolute top-[-8px] right-[8px] bottom-0 left-[8px] -z-10 rounded-[16px] border xl:top-0 xl:bottom-[-8px]"
        />
      </div>
      <div
        class="bg-background xl:rounded-t-0 rounded-e-0 border-surface-border mx-2 -mt-2 flex min-h-[545px] flex-col justify-between gap-6 rounded-b-[12px] border p-5 sm:p-8 xl:mx-0 xl:-ms-2 xl:mt-0 xl:rounded-e-[12px]"
      >
        <div v-if="branchesLoading" class="flex flex-col justify-start gap-6">
          <SkeletonsBranchCardSkeleton />
          <SkeletonsBranchCardSkeleton />
        </div>

        <div
          v-else-if="branches?.length === 0"
          class="container mx-auto flex h-[400px] items-center justify-center"
        >
          <EmptyState />
        </div>

        <div
          v-else
          class="scrollable-list flex h-full min-h-[365px] flex-col justify-start gap-5 overflow-y-auto"
        >
          <ContactBrancheCard
            v-for="branch in branches"
            :key="branch.id"
            :title="branch.title"
            :address="branch.address"
            :phone="branch.phone_number"
            :whatsapp="branch.whatsapp_number"
            :email="branch.email"
            :iframe-map="branch.url_map"
          />
        </div>

        <div class="social">
          <h4 class="text-accent mb-4">
            {{ $t("contactSection.socialTitle") }}
          </h4>
          <div class="flex flex-wrap items-center gap-4.5 sm:gap-5">
            <NuxtLink
              v-for="socialIcon in socialIcons"
              :key="socialIcon?.name"
              :href="socialIcon?.link"
              :aria-label="socialIcon?.name"
              target="_blank"
              rel="nofollow noopener"
              class="cursor-pointer"
            >
              <component :is="socialIconComponents[socialIcon?.name]" />
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.scrollable-list::-webkit-scrollbar {
  width: 8px;
}

.scrollable-list::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb {
  background: var(--surface-border);
  border-radius: 4px;
}

.scrollable-list::-webkit-scrollbar-thumb:hover {
  background: var(--surface-border);
}

.scrollable-list {
  scrollbar-width: thin;
  scrollbar-color: var(--surface-border) transparent;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
