'use client'

import Link from 'next/link'
import { FC, useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { useI18n, useScopedI18n } from '@/locales/client'
import { usePathname } from 'next/navigation'
import { LogoIcon, MenuIcon, CloseIcon } from '@/components/icons/layout-icon'
import { cn } from '@/lib/utils/cn'
import { ButtonArrow } from '@/components/icons/button-icon'
import { useMediaQuery } from 'react-responsive'
import { InstagramIcon } from '@/components/icons/socials'
import { BurderMenu } from './BurderMenu'
import { AnimatePresence } from 'framer-motion'
import { LanguageSwitcher } from './LanguageSwitcher'

export const HeaderClient: FC = ({}) => {
  const [isScrolled, setIsScrolled] = useState(false)
  const [isBurgerOpen, setIsBurgerOpen] = useState(false)
  const is1075px = useMediaQuery({ maxWidth: 1075 })
  const moreThan900px = useMediaQuery({ minWidth: 900 })

  const t = useScopedI18n('navigation')

  const path = usePathname()

  useEffect(() => {
    if (isBurgerOpen) {
      setIsBurgerOpen(false)
    }
  }, [path])

  return (
    <>
      <header
        className={cn(
          'w-full  flex z-[200]  items-end pb-4 tablet:pb-[18px] xl:pb-[0px] xl:items-center h-[96px] xl:h-20 container-padding  transition-all duration-300 ease-in-out fixed top-0 left-0 right-0 backdrop-blur-[48px]',
          isScrolled ? 'bg-transparent' : 'bg-transparent-black-10',
        )}
      >
        <div className="flex box justify-between items-center">
          <Link href={'/'}>
            <LogoIcon />
          </Link>
          <Navigation />
          <div className="flex items-center">
            <LanguageSwitcher />
            <Link href="/contacts">
              <Button className="ml-2 max-sm:hidden" sizes="btn-lg" variant="secondary">
                <span className="block min-w-[97px]"> {t('contactUs')} </span>
              </Button>
            </Link>

            <Button
              onClick={() => {
                setIsBurgerOpen((prev) => !prev)
              }}
              sizes="icon-btn-lg"
              className="min-[1075px]:hidden ml-3"
              iconOnly
              variant="icon-only"
              icon={
                !isBurgerOpen ? (
                  <MenuIcon fill="#F6ECE5" className="w-fit" width={16} height={16} />
                ) : (
                  <CloseIcon fill="#F6ECE5" className="w-fit" width={16} height={16} />
                )
              }
            />
          </div>
        </div>
      </header>
      <AnimatePresence>
        {isBurgerOpen && is1075px && (
          <BurderMenu moreThan900px={moreThan900px} setOpen={setIsBurgerOpen} />
        )}
      </AnimatePresence>
    </>
  )
}

export const Navigation: FC = ({ }) => {
  const pathname = usePathname()
  const t = useScopedI18n('navigation')

  const links = [
    { href: '/catalog', label: t('catalog') },
    { href: '/rental-terms', label: t('rentalTerms') },
    { href: '/about-us', label: t('aboutUs') },
    { href: '/blog', label: t('blog') },
    { href: '/reviews', label: t('reviews') },
    { href: '/contacts', label: t('contacts') },
  ]
  
  return (
    <div className="flex gap-x-6 max-[1075px]:hidden">
      {links.map(({ href, label }) => {
        const isActive = pathname === href || pathname.includes(`${href}`)
        return (
          <Button
            asChild
            sizes="btn-link-md"
            variant={'link-primary'}
            key={href}
            className={cn(isActive && 'text-beige-50 border-beige-50')}
          >
            
            <Link  href={href}>{label}</Link>
          </Button>
        )
      })}
    </div>
  )
}
