import React from 'react'
import {
    Button, Flex, VStack, HStack, IconButton,
    useColorModeValue, useDisclosure, Icon, Text,
    useToast,
} from '@chakra-ui/react'
import { FiMenu, FiCircle } from 'react-icons/fi'
import { Logo } from './Logo'
import { config } from '../config'
import { useApp } from '../AppContext'
import { AlertWallet } from './alert/AlertWallet'
import { connectWallet, addEventListeners, fetchAccount } from '../lib'
import { get_register } from '../api'
import { useSearchParams } from 'react-router-dom'


export const AppBar = ({ onOpenDrawer, ...rest }) => {
    const app = useApp()
    const toast = useToast()
    const [searchParams, _] = useSearchParams()
    const { isOpen: isOpenConnectedWallet, onOpen: onOpenConnectedWallet, onClose: onCloseConnectedWallet } = useDisclosure()

    const bg = useColorModeValue('white', 'gray.900')
    const borderBottomColor = useColorModeValue('gray.200', 'gray.700')
    // const bgMenu = useColorModeValue('white', 'gray.900')
    // const colorMenuBorder = useColorModeValue('gray.200', 'gray.700')

    const getUserWalletAddress = async () => {
        const address = await fetchAccount()
        if (address) {
            app.setAddress(address)
            toast({
                title: 'Connected',
                description: address,
                status: 'info',
                duration: 3000,
                isClosable: false,
            })
        }
        const referral = searchParams.get('referral') || ''
        get_register(address, referral).then(res => {
            // console.log(res.data)
        }).catch(err => {
            console.error('get_register() error:' + err.message)
        })
    }

    const connect = async () => {
        if (await connectWallet()) {
            await addEventListeners(getUserWalletAddress)
            await getUserWalletAddress()
        }
    }

    const onBtnConnect = async () => {
        if (!app.address) {
            await connect()
        } else {
            onOpenConnectedWallet()
        }
    }

    // auto connect
    React.useEffect(() => {
        if (config.AUTO_CONN_WALLET) {
            setTimeout(async () => {
                await connect()
            }, 2000)
        }
    }, [])

    return (
        <Flex
            ml={{ base: 0, md: 60 }}
            px={{ base: 4, md: 4 }}
            height="20"
            alignItems="center"
            bg={bg}
            borderBottomWidth="1px"
            borderBottomColor={borderBottomColor}
            justifyContent={{ base: 'space-between', md: 'flex-end' }}
            {...rest}>

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

            <HStack>
                <Button
                    size="md"
                    border="2px"
                    borderColor='green.500'
                    onClick={onBtnConnect}
                >
                    {
                        app.address ? 'Connected' : 'Connect Wallet'
                    }
                </Button>

                <IconButton
                    display={{ base: 'flex', md: 'none' }}
                    onClick={onOpenDrawer}
                    variant="outline"
                    aria-label="open menu"
                    icon={<FiMenu />}
                />
            </HStack>

            <AlertWallet
                isOpen={isOpenConnectedWallet}
                onCloseWnd={onCloseConnectedWallet}
                title="Wallet Address"
            >
                <VStack
                    w="full"
                >
                    <HStack>
                        <Icon bg="green.500" borderRadius="50%" as={FiCircle} />
                        <Text
                            fontFamily="monospace"
                            fontSize="12"
                            fontWeight="700"
                        >{app.address}</Text>
                    </HStack>
                </VStack>
            </AlertWallet>
        </Flex>
    )
}