import React from 'react'
import {
    VStack, Image, Text, HStack,
    Button, Flex, Slider,
    SliderTrack, SliderFilledTrack
} from "@chakra-ui/react"
import { Images } from '../data'

const Row = ({ children }) => {
    return (
        <HStack
            w="full"
            justify="space-between"
            align="center"
        >
            {children}
        </HStack>
    )
}

const CardRow = ({ title, value, compond = false }) => {

    return (
        <Row>
            <Flex>
                <Text
                    fontSize="14"
                    color="gray.600"
                >
                    {title}
                </Text>
                {
                    compond && <Text
                        fontSize="14"
                        color="blue.400"
                    >(Compound Interest)</Text>
                }
            </Flex>
            {
                compond
                    ? <Text fontWeight="900" fontSize="16" color="green.500">{value}</Text>
                    : <Text fontWeight="700" fontSize="12" color="gray.500">{value}</Text>
            }

        </Row>
    )
}

export const FarmCoinCard = ({ index, icon, symbol, apy, deposited, vl,
    remaining, loading = false, isNew = false, authorized = false, onWithdrawal = null, onMining = null }) => {
    return (
        <VStack
            position="relative"
            w="full"
            py="4"
            px="8"
            my="4"
            bg="white"
            borderWidth="1px"
            borderRadius="16"
            align="center"
            flex={1}
        >
            <HStack
                w="full"
                justify="space-between"
                align="center"
                py="4"
            >
                <HStack>
                    <Image
                        w="8" h="8"
                        borderRadius="50%"
                        src={icon} alt={symbol} />
                    <Text
                        fontWeight="700"
                    >{symbol}</Text>
                </HStack>

                <Text
                    color="gray.400"
                    fontSize="10"
                >Harvest {symbol}</Text>

                {
                    isNew && <Image
                        position="absolute"
                        top="0"
                        right="0"
                        src={Images.new}
                        alt="new" />
                }

            </HStack>

            <CardRow title="APY" value={apy} compond="true" />
            <CardRow title="Deposited" value={deposited} />
            <CardRow title="VL" value={vl} />
            <CardRow title="Remaining" value={remaining} />

            <HStack
                w="full"
            >
                <Slider aria-label='slider-ex-4' defaultValue={deposited} min={0} max={vl}>
                    <SliderTrack bg='red.100'>
                        <SliderFilledTrack bg='tomato' />
                    </SliderTrack>
                </Slider>
            </HStack>

            <HStack
                w="full"
                align="center"
                justify="space-around"
            >
                <Button w="30" h="10"
                    onClick={() => { onWithdrawal && onWithdrawal(index) }}
                >
                    Withdrawal
                </Button>
                <Button w="30" h="10" colorScheme="teal" isLoading={loading}
                    onClick={() => { onMining && onMining(index) }}
                >
                    {
                        authorized ? 'Deposite' : 'Mining'
                    }
                </Button>
            </HStack>

        </VStack>
    )
}