import {
    Text, Button, Tab, TabList, TabPanel, TabPanels,
    Tabs, Center, Input, Divider, Image,
    Badge, Icon, StackDivider, HStack,
} from '@chakra-ui/react'
import React from 'react'
import { HBetween, HFStack, PoolData, VFStack } from '../components'
import { Images } from '../data'
import {
    get_page_account, post_withdraw,
    get_withdrawal_history,
    get_daily_revenue_history,
    get_reward_history,
} from '../api'
import { useApp } from '../AppContext'


let accountData = [
    { name: 'Total output', value: 0, emp: false, unit: 'USDT' },
    { name: 'Wallet balance', value: 0, emp: false, unit: 'USDT' },
    { name: 'Withdrawal balance', value: 0, emp: false, unit: 'USDT' },
]

const NoData = () => (
    <HStack h='20' >
        <Text>
            No Available Data
        </Text>
    </HStack>
)

export const Account = () => {
    const app = useApp()

    const [accountInfo, setAccountInfo] = React.useState(accountData)
    const [withdrawalHist, setWithdrawalHist] = React.useState([])
    const [dailyRevenueHist, setDailyRevenueHist] = React.useState([])
    const [rewardHist, setRewardHist] = React.useState([])

    const [withdrawalAmount, setWithdrawalAmount] = React.useState(0)

    const onBtnConfirm = () => {
        if (app.address && withdrawalAmount > 0) {
            post_withdraw(app.address, withdrawalAmount).then(res => {

            }).catch(err => {
                console.error(err.message)
            })
        }
    }

    React.useEffect(() => {
        if (app.address) {
            get_page_account(app.address).then(res => {
                console.log(res.data)
                const d = res.data
                let newAccount = [...accountData]
                newAccount[0].value = d.output
                newAccount[1].value = d.balance
                newAccount[2].value = d.withdrawal
                setAccountInfo(newAccount)

            }).catch(err => {
                console.error(err.message)
            })

            get_withdrawal_history().then(res => {
                console.log(res.data)
            })
            get_daily_revenue_history().then(res => {
                console.log(res.data)
            })
            get_reward_history().then(res => {
                console.log(res.data)
            })
        }
    }, [app.address])

    return (
        <>
            <PoolData title='My Account' data={accountInfo} />

            <Tabs mt="4" isFitted variant="enclosed">
                <TabList>
                    <Tab _selected={{ color: 'white', bg: 'purple.500' }}> Withdrawal</Tab>
                    <Tab _selected={{ color: 'white', bg: 'purple.500' }}>Record</Tab>
                </TabList>

                <TabPanels>

                    <TabPanel
                        bg="white"
                        borderWidth="1px"
                        borderRadius="lg"
                        boxShadow="lg"
                    >
                        <VFStack>
                            <HFStack
                                p="4"
                            >
                                <Text fontWeight='700'>Withdraw</Text>
                            </HFStack>

                            <HFStack
                                align="center"
                                borderRadius="lg"
                                borderWidth="1px"
                                p="2"
                                divider={<StackDivider borderColor='gray.200' />}
                            >
                                <VFStack flex={1} align="start">
                                    <Input
                                        type='number'
                                        borderWidth="0"
                                        _focus={{ borderWidth: "0" }}
                                        size="lg"
                                        value={withdrawalAmount}
                                        onChange={(ev) => {
                                            setWithdrawalAmount(ev.target.value)
                                        }}
                                    />

                                    <Badge
                                        as="button"
                                        colorScheme='blue'
                                        variant='solid'
                                        fontSize='10'
                                        onClick={() => {
                                            setWithdrawalAmount(accountInfo[1].value)
                                        }}
                                    >
                                        Redeem all
                                    </Badge>
                                </VFStack>

                                <HFStack
                                    flex={1}
                                    justify="center"
                                    align="center"
                                    fontWeight='700'
                                    pb="6"
                                >
                                    <Image w='8' h='8' borderRadius='50%' src={Images.usdt} alt="usdt" />
                                    <Text>USDT</Text>
                                </HFStack>

                            </HFStack>

                            <Center py="4">
                                <Button colorScheme="purple" onClick={onBtnConfirm}>Confirm</Button>
                            </Center>

                            <Divider />

                            <HFStack>
                                <Text
                                    fontSize='12'
                                    color='gray.400'
                                >
                                    Your withdrawal will be sent to you USDT wallet address within 24 hours.
                                </Text>
                            </HFStack>
                        </VFStack>
                    </TabPanel>

                    <TabPanel>

                        <Tabs>
                            <TabList>
                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>Withdraw</Tab>
                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>DailyRevenue</Tab>
                                <Tab _selected={{ color: 'white', bg: 'purple.400' }}>Reward</Tab>
                            </TabList>

                            <TabPanels>
                                <TabPanel>
                                    <HBetween>
                                        <Text>Time</Text>
                                        <Text>Quantity</Text>
                                        <Text>Status</Text>
                                    </HBetween>
                                    {
                                        withdrawalHist ?
                                            <>
                                            </>
                                            :
                                            'No Data.'
                                    }
                                </TabPanel>

                                <TabPanel>
                                    <HBetween>
                                        <Text>Time</Text>
                                        <Text>Quantity</Text>
                                        <Text>Type</Text>
                                    </HBetween>
                                    {
                                        dailyRevenueHist ?
                                            <>
                                            </>
                                            :
                                            'No Data.'
                                    }
                                </TabPanel>

                                <TabPanel>
                                    <HBetween>
                                        <Text>Time</Text>
                                        <Text>Quantity</Text>
                                        <Text>User Address</Text>
                                    </HBetween>
                                    {
                                        rewardHist ?
                                            <>
                                            </>
                                            :
                                            'No Data.'
                                    }
                                </TabPanel>
                            </TabPanels>
                        </Tabs>
                    </TabPanel>
                </TabPanels>
            </Tabs>
        </>

    )
}