import { Text, Box, Link as ChakraLink, useDisclosure, VStack } from '@chakra-ui/react';
import { RxChevronDown } from 'react-icons/rx';
import { NavItem } from '@/config/navigation';
import { useActiveNavItem } from '@/hooks/useActiveNavItem';
import { Link } from '@/i18n/navigation';
import { useTranslations } from 'next-intl';

function MobileHeaderLink({ item }: { item: NavItem }) {
  const t = useTranslations();
  const { isActive, isChildActive } = useActiveNavItem(item);
  const { open, onToggle } = useDisclosure();

  return (
    <Box key={item.label} w='full'>
      {item.children ? (
        <VStack align='start' w='full' spaceY={0}>
          <Text
            onClick={onToggle}
            display='inline-flex'
            alignItems='center'
            gap='1'
            cursor='pointer'
            color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
            textUnderlineOffset='4px'
            textUnderlinePosition='from-font'
            textDecoration={isActive ? 'underline' : 'none'}
            fontWeight='semibold'
            fontSize={{ base: 'md', md: 'lg' }}
            _hover={{
              color: { base: 'primary.500', _dark: 'primary.300' },
              transition: 'all 0.2s ease-in-out',
            }}
          >
            {t(item.label)}
            <RxChevronDown
              style={{ transform: open ? 'rotate(-180deg)' : 'rotate(0deg)', transition: 'transform 0.2s' }}
            />
          </Text>
          {open && item.children && (
            <VStack align='start' pl='4' pt='1' pb='2' w='full' spaceY={1}>
              {item.children.map((child, index) => {
                const isActiveChild = isChildActive(child.href);

                return (
                  <ChakraLink
                    key={index}
                    as={Link}
                    href={child.href}
                    focusRing='none'
                    color={isActiveChild ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
                    textUnderlineOffset='4px'
                    textUnderlinePosition='from-font'
                    textDecoration={isActiveChild ? 'underline' : 'none'}
                    fontWeight='semibold'
                    fontSize={{ base: 'md', md: 'lg' }}
                  >
                    {t(child.label)}
                  </ChakraLink>
                );
              })}
            </VStack>
          )}
        </VStack>
      ) : (
        <ChakraLink
          as={Link}
          href={item.href}
          w='full'
          focusRing='none'
          color={isActive ? { base: 'primary.500', _dark: 'primary.300' } : 'fg.muted'}
          textUnderlineOffset='4px'
          textUnderlinePosition='from-font'
          textDecoration={isActive ? 'underline' : 'none'}
          fontWeight='semibold'
          fontSize={{ base: 'md', md: 'lg' }}
        >
          {t(item.label)}
        </ChakraLink>
      )}
    </Box>
  );
}

export default MobileHeaderLink;