'use client'
import { HeaderEntity, HeaderEntityResponseCollection } from '@/generated/types'
import { GET_FOOTERS_QUERY } from '@/graphql/documents/footer.graphql'
import { useQuery } from '@apollo/client'
import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useState } from 'react'
import { useTranslation } from '../../app/i18n'
import styles from './footer.module.scss'

export type HeaderResponses = {
  headers: HeaderEntityResponseCollection
}

type FooterProps = {
  lng: string
  headerData?: HeaderResponses | null
}

type TranslationFunction = (key: string) => string

export default function Footer(props: FooterProps) {
  const [t, setT] = useState<TranslationFunction | null>(null)
  const [i18n, setI18n] = useState(null)
  const { lng, headerData } = props

  useEffect(() => {
    const fetchData = async () => {
      const { t, i18n } = await useTranslation(lng, 'second-page')
      setT(() => t)
      setI18n(i18n)
    }

    fetchData()
  }, [lng])

  const footer = useQuery(GET_FOOTERS_QUERY, {
    variables: {
      locale: lng,
    },
  })

  if (!t || !i18n) {
    return null
  }

  return (
    <>
      <div className={styles.footer}>
        <div className="mt-12 ml-8 mb-5 w-full justify-between grid sm:flex">
          <div className="px-5">
            <p
              className={`${styles.items_title} text-xl mb-3 font-bold text-blue-300`}
            >
              {t('footer.follow-us')}
            </p>
            <div className="flex w-1/3 sm:w-24 lg:w-26 px-2 justify-between">
              <div className="border-2 w-7 h-7 px-2 border-white rounded-full">
                <Link href="https://www.facebook.com/wedig.it1">
                  <Image
                    src="/assets/static/images/facebook.png"
                    placeholder="empty"
                    alt="Facebook"
                    className="pt-1.5"
                    width={10}
                    height={10}
                    priority
                  />
                </Link>
              </div>
              <div className="border-2 w-7 h-7 rounded-full border-white pl-1 py-1">
                <Link href="https://gt.linkedin.com/company/web3lance">
                  <Image
                    src="/assets/static/images/linkedin.svg"
                    placeholder="empty"
                    alt="linkedin"
                    width={15}
                    height={15}
                    priority
                  />
                </Link>
              </div>
            </div>

            <p className={` ${styles.copy} mt-4 text-md text-white`}>
              &copy; {' ' + footer?.data?.aboutUs?.data?.attributes?.years}{' '}
              Wedig`IT.
            </p>
          </div>
          <div className=" grid sm:flex mr-16 justify-between">
            <div className="mx-5  w-32 lg:40 xl:w-44">
              <p
                className={` ${styles.items_title} mb-4 font-bold text-blue-300 `}
              >
                {t('footer.pages')}
              </p>
              <ul className={` ${styles.items_list} list-none text-white`}>
                {headerData &&
                  headerData?.headers?.data?.length > 0 &&
                  headerData?.headers?.data.map(
                    (res: HeaderEntity, index: number) => {
                      return (
                        <li key={index} className="mb-2 hover:text-blue-300">
                          <Link
                            href={res.attributes?.url || '/'}
                            passHref
                            className=""
                          >
                            {res.attributes?.name}
                          </Link>
                        </li>
                      )
                    },
                  )}
              </ul>
            </div>
            <div className="mx-5 w-32 md:w-44 xl:w-64">
              <p
                className={` ${styles.items_title} mb-4 font-bold text-blue-300 `}
              >
                {t('footer.contact-us')}
              </p>
              <ul className={` ${styles.items_list} list-none text-white`}>
                <li className="mb-2">
                  {' '}
                  {t('contact.tetephone')}{' '}
                  {footer?.data?.aboutUs?.data?.attributes?.phone}
                </li>
                <li className="mb-2">
                  {' '}
                  {t('contact.email')}{' '}
                  {footer?.data?.aboutUs?.data?.attributes?.email}
                </li>
                <li className="mb-2">
                  {' '}
                  {t('contact.address')}{' '}
                  {footer?.data?.aboutUs?.data?.attributes?.address}{' '}
                </li>
              </ul>
            </div>
            <div className="ml-5 mr-3 w-44 md:w-52 xl:w-60">
              <p
                className={` ${styles.items_title} mb-4 font-bold text-blue-300 `}
              >
                {t('footer.our-status')}
              </p>
              <ul className={`${styles.items_list} list-none text-white`}>
                <li className="mb-2">
                  Nif: {' ' + footer?.data?.aboutUs?.data?.attributes?.nif}
                </li>
                <li className="mb-2">
                  Stat: {' ' + footer?.data?.aboutUs?.data?.attributes?.stat}
                </li>
                <li className="mb-2">
                  RCS: {' ' + footer?.data?.aboutUs?.data?.attributes?.rcs}
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}