import {
  Box,
  Center,
  Collapse,
  HStack,
  SimpleGrid,
  Text,
  useColorModeValue as mode,
} from '@chakra-ui/react'
import { ChevronRightIcon } from 'assets/icons/ChevronRightIcon'
import * as React from 'react'
import { NextChakraLink } from '../nextChakraAdapters/NextChakraLink'
import { links } from './_data'

type Props = { isOpen: boolean }

export const ResourcesMenu = ({ isOpen }: Props) => (
  <Collapse in={isOpen} animateOpacity unmountOnExit={false}>
    <Box
      w="full"
      shadow="lg"
      pos="absolute"
      insetX={0}
      top="16"
      py="12"
      px="4"
      bgGradient="linear(to-b, gray.900, gray.800)"
    >
      <Box maxW="7xl" mx="auto" px="8">
        <SimpleGrid spacing="10" columns={2}>
          {links[0].children?.map((item, idx) => (
            <NextChakraLink
              key={idx}
              className="group"
              href={item.href}
              m="-3"
              p="3"
              display="flex"
              alignItems="flex-start"
              transition="all 0.2s"
              rounded="lg"
              _hover={{ bg: mode('gray.50', 'gray.600') }}
              _focus={{ shadow: 'outline' }}
              isExternal={
                item.href.startsWith('https') &&
                !item.href.includes('app.typebot.io')
              }
            >
              <Center
                aria-hidden
                as="span"
                flexShrink={0}
                w="10"
                h="10"
                fontSize="3xl"
                color={'blue.300'}
              >
                {item.icon}
              </Center>
              <Box marginStart="3" as="dl">
                <HStack as="dt">
                  <Text
                    fontWeight="semibold"
                    color={mode('gray.900', 'white')}
                    _groupHover={{ color: mode('blue.600', 'inherit') }}
                  >
                    {item.label}
                  </Text>
                  <Box
                    fontSize="xs"
                    as={ChevronRightIcon}
                    transition="all 0.2s"
                    _groupHover={{
                      color: mode('blue.600', 'inherit'),
                      transform: 'translateX(2px)',
                    }}
                  />
                </HStack>
                <Text as="dd" color={mode('gray.500', 'gray.400')}>
                  {item.description}
                </Text>
              </Box>
            </NextChakraLink>
          ))}
        </SimpleGrid>
      </Box>
    </Box>
  </Collapse>
)