import React from "react"
import {
    Box, Stack, VStack, Image, Text,
    Flex, HStack, useColorModeValue
} from "@chakra-ui/react"
import { Auditors, Partners, } from "../components"
import { useApp } from '../AppContext'
import { get_page_mining } from '../api'
import { PoolData } from "../components/PoolData"
import { Faq } from "../components/Faq"
import { LatestScreen } from "../components/LatestScreen"

const HomeFooter = () => {

    const app = useApp()

    return (
        <Flex
            mt="6"
            mx="4"
            justifyContent="space-between"
            alignItems="center"
            color="gray.500"
        >
            <Image src={app.logo} filter="grayscale(100%)" opacity="0.5" alt='logo' />

            <a href="https://www.fairyproof.com/" target="_blank" rel="noreferrer">
                <Text
                    fontFamily="monospace"
                    fontSize="14"
                >FAIRYPROOF</Text>
            </a>
        </Flex>
    )
}

let defPoolData = [
    { name: 'Total output', value: 234, emp: true, unit: '' },
    { name: 'Valid node', value: 2344.34, emp: true, unit: '' },
    { name: 'Participant', value: 2342342.32, emp: false, unit: '' },
    { name: 'User revenue', value: 234234.04, emp: false, unit: 'USDT' },
]

export const Home = () => {
    const [poolData, setPoolData] = React.useState(defPoolData)
    const [lastestRecord, setLastestRecord] = React.useState([])
    const [articles, setArticles] = React.useState([])

    const app = useApp()

    const bg = useColorModeValue('white', 'gray.900')
    const stateCardBg = useColorModeValue('gray.100', 'gray.900')

    React.useEffect(() => {
        get_page_mining().then(res => {
            // console.log(res.data)
            const pd = res.data.pool_data
            let newPd = [...defPoolData]
            newPd[0].value = pd.totalOutput
            newPd[1].value = pd.validNode
            newPd[2].value = pd.participant
            newPd[3].value = pd.userRevenue
            setPoolData(newPd)
            setArticles(res.data.articles)
            setLastestRecord(res.data.topEarns)
        }).catch(err => {

        })
    }, [])

    return (
        <>
            <PoolData title='Pool' data={poolData} />

            <LatestScreen mt="4" data={lastestRecord} />

            <Faq articles={articles} mt="4" />

            <Auditors mt="4" />

            <Partners mt="4" />

            <HomeFooter />
        </>
    )
}