"use client"
import { images } from "@/lib/images"
import Image from "next/image"
import React from "react"

// types
import { ContactsInfo } from "@/modules/contacts/contactsInfo"
import useGetQuery from "@/hooks/useGetQuery"
import Link from "next/link"
import TranslateClient from "@/components/ui/localization/TranslateClient"
import LoadingSpinner from "../shared/loadingSpinner/LoadingSpinner"

const ContactInfo = ({ lang }: { lang: Lang }) => {
  // api/setting_web/contacts

  const { data: contactInfoData, isLoading } = useGetQuery<ContactsInfo>({
    endpoint: `api/setting_web/contacts`,
    queryKey: ["get-contactInfo"],
    select(data: { data: ContactsInfo }): ContactsInfo {
      return data.data
    },
  })

  if (isLoading) return <div><LoadingSpinner /></div>

  return (
    <div className="rounded-xl">
      <div className="rounded-xl border border-mainBlue px-6 py-11">
        <h2 className="text-3xl md:text-4xl lg:text-5xl mb-8">
          <TranslateClient text="contact_information" />
        </h2>
        <p className="text-mainGray">
          <TranslateClient text="contact_discription" />
        </p>
        <ul className="my-7">
          <li className="flex items-center gap-2 mb-4">
            <Image src={images.location} width={24} height={24} alt="location" />

            <span>{contactInfoData?.address?.[lang]}</span>
          </li>

          {contactInfoData?.contacts?.email && (
            <li className="flex items-center gap-2 mb-4">
              <Image src={images.sms} width={24} height={24} alt="sms" />
              <span>{contactInfoData?.contacts?.email}</span>
            </li>
          )}

          {(contactInfoData?.contacts?.phone1 || contactInfoData?.contacts?.phone2) && (
            <li className="flex items-center gap-2 mb-4">
              <Image src={images.call} width={24} height={24} alt="call" />
              {contactInfoData?.contacts?.phone1 && (
                <Link href={`https://wa.me/${contactInfoData?.contacts?.phone1}`} target="_blank" className="ml-2">
                  {contactInfoData?.contacts?.phone1}
                </Link>
              )}

              {contactInfoData?.contacts?.phone2 && (
                <Link href={`https://wa.me/${contactInfoData?.contacts?.phone2}`} target="_blank" className="ml-2">
                  {contactInfoData?.contacts?.phone2}
                </Link>
              )}

              {/* <div className="flex items-start flex-wrap bg-re-500">
                  <Link href="https://wa.me/+966564800048" target="_blank" className="ml-2">
                    0564800048
                  </Link>

                  <Link href="https://wa.me/+966549380000" target="_blank" className="ml-2">
                    0549380000
                  </Link>
                </div> */}

              {/* <div className="flex items-start flex-wrap">
                  {contactInfoData?.contacts?.phone1 && (
                    <Link
                      href={`https://wa.me/+966${contactInfoData?.contacts?.phone1}`}
                      target="_blank"
                      className="ml-2"
                    >
                      {contactInfoData?.contacts?.phone1}
                    </Link>
                  )}
                  {contactInfoData?.contacts?.phone2 && (
                    <Link
                      href={`https://wa.me/+966${contactInfoData?.contacts?.phone2}`}
                      target="_blank"
                      className="ml-2"
                    >
                      {contactInfoData?.contacts?.phone2}
                    </Link>
                  )}
                  {contactInfoData?.contacts?.phone3 && (
                    <Link
                      href={`https://wa.me/+966${contactInfoData?.contacts?.phone3}`}
                      target="_blank"
                      className="ml-2"
                    >
                      {contactInfoData?.contacts?.phone3}
                    </Link>
                  )}
                </div> */}

              {/* {" //////////////// "} */}
            </li>
          )}
        </ul>
        <div className="flex gap-3">
          {contactInfoData?.social?.instagram && (
            <div className="bg-gray-100 p-3 rounded-xl">
              {/* @ts-ignore */}
              <Link href={contactInfoData?.social?.instagram || ""} target="_blank">
                <Image src={images.insta} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}

          {contactInfoData?.social?.facebook && (
            <div className="bg-gray-100 p-3 rounded-xl">
              <Link href={contactInfoData?.social?.facebook || ""} target="_blank">
                <Image src={images.facebook} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}

          {contactInfoData?.social?.youtube && (
            <div className="bg-gray-100 p-3 rounded-xl">
              <Link href={contactInfoData?.social?.youtube || ""} target="_blank">
                <Image src={images.youtube} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}

          {contactInfoData?.social?.tiktok && (
            <div className="bg-gray-100 p-3 rounded-xl">
              <Link href={contactInfoData?.social?.tiktok || ""} target="_blank">
                <Image src={images.tiktok} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}

          {contactInfoData?.social?.linkedin && (
            <div className="bg-gray-100 p-3 rounded-xl">
              <Link href={contactInfoData?.social?.linkedin || ""} target="_blank">
                <Image src={images.linkedin} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}

          {contactInfoData?.social?.snapchat && (
            <div className="bg-gray-100 p-3 rounded-xl">
              <Link href={contactInfoData?.social?.snapchat || ""} target="_blank">
                <Image src={images.snapchat} width={24} height={24} alt="location" />
              </Link>
            </div>
          )}
        </div>

        {/* <div className="mt-7">
            <h3 className="text-mainBlue">
            <TranslateClient text="whatsapp_numbers_for_contact" />
            </h3>
          <div className="py-2">
            <Link href="https://wa.me/+966541618332" target="_blank">
              0541618332
            </Link>
          </div>

          <div className="py-2">
            <Link href="https://wa.me/+966564800048" target="_blank">
              0564800048
            </Link>
          </div>
          
          <div className="py-2">
            <Link href="https://wa.me/+966549380000" target="_blank">
              0549380000
            </Link>
          </div>
        </div> */}
      </div>
    </div>
  )
}

export default ContactInfo