import {
    Text, Box, CloseButton, Flex, Icon, useColorModeValue,
    Stack, Select,
} from '@chakra-ui/react'
import { FiArrowRight, FiHome, FiTrendingUp } from 'react-icons/fi'
import { useApp } from '../AppContext'
import { Logo } from './Logo'
import { ColorModeSwitcher } from './ColorModeSwitcher'
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next'
import { useLocalStorage } from '../hooks'
import { Lang } from './Lang'
import { supportedLangs } from '../i18'

const NavItem = ({ icon, path, onClick, children, ...rest }) => {
    return (
        <Link to={path}>
            <Flex
                align="center"
                p="4"
                mx="4"
                borderRadius="lg"
                role="group"
                cursor="pointer"
                onClick={onClick}
                _hover={{ bg: 'cyan.400', color: 'white' }}
                {...rest}
            >
                {icon && (
                    <Icon mr="4" fontSize="16" _groupHover={{ color: 'white' }} as={icon} />
                )}

                {children}
            </Flex>
        </Link>
    )
}

const DocItem = ({ path, children, ...rest }) => {
    return (
        <Link to={path}>
            <Flex
                align="center"
                p="4"
                mx="4"
                borderRadius="lg"
                role="group"
                cursor="pointer"
                fontFamily="monospace"
                fontSize="12"
                color="gray.400"
                _hover={{ bg: 'gray.600', color: 'white' }}
                justifyContent="space-between"
                {...rest}
            >
                {children}
                <Icon mr="4" fontSize="16" _groupHover={{ color: 'white' }} as={FiArrowRight} />
            </Flex>
        </Link>
    )
}

const SocialItem = ({ icon, path, ...rest }) => {
    return (
        <a href={path} target="_blank" rel="noreferrer">
            <Icon _hover={{ color: 'gray.900' }} as={icon} />
        </a>
    )
}

export const SideBar = ({ onClose, ...rest }) => {
    const app = useApp()

    const bg = useColorModeValue('white', 'gray.900')
    const { t, i18n } = useTranslation()
    // const colorBorderRight = useColorModeValue('gray.200', 'gray.700')

    const menuItems = [
        { name: t('home'), icon: FiHome, path: '/home', enabled: true },
        { name: t('farm'), icon: FiTrendingUp, path: '/farm', enabled: true },
    ]

    const docItems = [
        { name: t('announcement'), icon: '', path: '', enabled: true },
        { name: t('faq'), icon: '', path: '', enabled: true },
        { name: t('tutorial'), icon: '', path: '', enabled: true },
    ]

    return (
        <Box
            transition="3s ease"
            bg={bg}
            // borderRight="1px"
            // borderRightColor={colorBorderRight}
            w={{ base: 'full', md: 60 }}
            pos="fixed"
            h="full"
            {...rest}>

            <Flex h="20"
                alignItems="center"
                mx="8"
                justifyContent="space-between"
            >
                <Logo />

                <ColorModeSwitcher
                    display={{ base: 'flex', md: 'none' }}
                />

                <CloseButton display={{ base: 'flex', md: 'none' }} onClick={onClose} />
            </Flex>

            <Flex h="90%" direction="column" justifyContent="space-between">
                <Box>
                    <Stack
                        display={{ base: 'flex', md: 'none' }}
                        w="30"
                        mx="8"
                        my="4"
                    >
                        <Lang config={supportedLangs} />
                    </Stack>

                    {/* nav links */}
                    {
                        menuItems.map((item) => (
                            item.enabled && <NavItem key={item.name} icon={item.icon} onClick={onClose} path={item.path}>
                                {item.name}
                            </NavItem>
                        ))
                    }
                </Box>

                <Box>
                    {/* document links */}
                    {
                        docItems.map((item) => (
                            item.enabled && <DocItem key={item.name} icon={item.icon} path={item.path}>
                                {item.name}
                            </DocItem>
                        ))
                    }
                    {/* social icons */}
                    <Flex
                        px="8"
                        my="8"
                        fontSize="18"
                        color="gray.400"

                        justifyContent="space-between"
                    >
                        {
                            app.socials.map((item) => (
                                item.enabled && <SocialItem key={item.name} icon={item.icon} path={item.path} />
                            ))
                        }
                    </Flex>
                </Box>
            </Flex>
        </Box>
    )
}