import React, { useState } from 'react'
import { StyleSheet, View, Dimensions, Pressable } from 'react-native'
import { DreamSection, HomeContainer, WalletSection, NativeSection, IconWrapper, Shape, AccessSection, BannerSection } from './styles'
import { OButton, OIcon, OText } from '../shared'
import { useSession, useLanguage } from 'ordering-components-Ubanku-Custom/native'
import { Wallets } from '../Wallets'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import FeatherIcons from 'react-native-vector-icons/Feather'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { useTheme } from 'styled-components/native'
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import { PageBanner } from '../PageBanner'
import { Header } from '../Header'

export const HomeUbanku = (props: any) => {
    const { navigation } = props
    const [{ user }] = useSession()
    const [, t] = useLanguage()
    const theme = useTheme()
    const [dreamActived, setDreamIsActived] = useState(false) // value of the activated dream
    const [dreamProgress, setDreamProgress] = useState(0)
    const width = Dimensions.get('screen').width
    const styles = StyleSheet.create({
        dreamContainer: {
            flexDirection: 'row',
            justifyContent: 'space-between',
        },
        iconContainer: {
            backgroundColor: '#fff',
            width: 30,
            height: 30,
            justifyContent: 'center',
            alignItems: 'center',
            textAlign: 'center',
            borderRadius: 30,
            marginBottom: 2,
            zIndex: 10
        },
        basicContainer: {
            backgroundColor: `${theme?.colors?.primary}`,
            padding: 20,
            zIndex: 10,
            position: 'relative'
        },
        shape: {
            position: 'absolute',
            width: width / 1.5,
            height: width / 1.5,
            borderRadius: width / 2,
            backgroundColor: theme?.colors?.primary,
            transform: [{ scaleX: 2 }],
            zIndex: -10,
            left: width / 8 + 10,
            bottom: -45
        },
        square: {
            position: 'relative',
            width: '45%',
            marginHorizontal: 10,
            paddingTop: 10,
            paddingRight: 10,
            borderRadius: 10
        },
        progressContent: {
            alignItems: 'center',
        },
        seeText: {
            fontFamily: 'bold',
            color: '#fff',
            textShadowColor: '#002930',
            textShadowOffset: { width: 1, height: 2 },
            textShadowRadius: 1
        }
    })

    const handleToggleActiveDream = () => {
        setDreamIsActived(!dreamActived)
    }

    const handleGoToLoad = () => {
        navigation.navigate('Business', {
            store: 'load',
        });
    }

    return (
        <HomeContainer>
            <Header {...props} />
            <View>
                <View style={styles.basicContainer}>
                    <DreamSection>
                        <View style={styles.dreamContainer}>
                            <View>
                                {user?.dream && (
                                    <OText size={28} style={{ flexWrap: 'wrap', width: '65%', fontWeight: 'bold' }} >
                                        {user?.dream}
                                    </OText>
                                )}
                                {dreamActived && user?.dream_time && (
                                    <OText>
                                        {user?.dream_time}
                                    </OText>
                                )}
                            </View>
                            {!dreamActived ? (
                                <OButton
                                    text={!dreamActived ? t('ACTIVE', 'Active') : t('DEACTIVATE', 'Deactivate')}
                                    bgColor='#000'
                                    textStyle={{ color: '#fff' }}
                                    borderColor='#000'
                                    style={{ height: 45 }}
                                    onClick={handleToggleActiveDream}
                                />
                            ) : (
                                <Pressable
                                    onPress={() => navigation.navigate('DreamProgress')}
                                >
                                    <AnimatedCircularProgress
                                        size={120}
                                        width={10}
                                        fill={dreamProgress}
                                        tintColor="#FFFFFF"
                                        backgroundColor="#002930"
                                    >
                                        {() => (
                                            <View style={styles.progressContent}>
                                                <OText size={28} style={styles.seeText}>
                                                    {t('SEE', 'See')}
                                                </OText>
                                                <OText>
                                                    {t('PROGRESS', 'Progress')}
                                                </OText>
                                            </View>
                                        )}
                                    </AnimatedCircularProgress>
                                </Pressable>
                            )}
                        </View>
                        {!dreamActived && (
                            <OText size={14}>
                                {t('YOUR_DREAM_IS_PAUSED', 'Your dream is paused')}
                            </OText>
                        )}
                    </DreamSection>
                    <WalletSection>
                        <Wallets {...props} />
                    </WalletSection>
                </View>
                <NativeSection>
                    <IconWrapper>
                        <TouchableOpacity onPress={() => handleGoToLoad()} style={styles.iconContainer}>
                            <OIcon
                                src={theme?.images?.general?.upload}
                                color={'#000'}
                                width={13}
                                height={14}
                            />
                        </TouchableOpacity>
                        <OText>
                            {t('LOAD', 'Load')}
                        </OText>
                    </IconWrapper>
                    <IconWrapper>
                        <TouchableOpacity onPress={() => navigation.navigate('Withdraw')} style={styles.iconContainer}>
                            <OIcon
                                src={theme?.images?.general?.download}
                                width={13}
                                height={14}
                            />
                        </TouchableOpacity>
                        <OText>
                            {t('WITHDRAW', 'Withdraw')}
                        </OText>
                    </IconWrapper>
                    <IconWrapper>
                        <TouchableOpacity onPress={() => navigation.navigate('Send')} style={styles.iconContainer}>
                            <OIcon
                                src={theme?.images?.general?.send}
                                width={13}
                                height={14}
                            />
                        </TouchableOpacity>
                        <OText>
                            {t('SEND', 'Send')}
                        </OText>
                    </IconWrapper>
                </NativeSection>
                <Shape style={styles.shape} />
            </View>
            <AccessSection>
                <Pressable
                    onPress={() => navigation.navigate('BottomTab', {
                        screen: 'Purchase'
                    })}
                    style={{ ...styles.square, backgroundColor: '#FFEB67' }}>
                    <OText
                        style={{ alignSelf: 'flex-end', textAlign: 'right' }}
                        size={16}
                        mLeft={20}
                        numberOfLines={2}

                    >
                        {t('SAVE_BUYING', 'Save buying')}
                    </OText>
                    <OIcon
                        src={theme?.images?.general?.save_buying}
                        width={80}
                        height={80}
                    />
                </Pressable>
                <Pressable
                    onPress={() => navigation.navigate('Invest')}
                    style={{ ...styles.square, backgroundColor: '#E6C2F3' }}
                >
                    <OText
                        style={{ alignSelf: 'flex-end', textAlign: 'right' }}
                        size={16}
                        mLeft={20}
                    >
                        {t('ACCELERATE_YOUR_DREAMS', 'Accelerate your dreams')}
                    </OText>
                    <OIcon
                        src={theme?.images?.general?.accelerate_dreams}
                        width={80}
                        height={80}
                    />
                </Pressable>
            </AccessSection>
            <BannerSection>
                <PageBanner position='app_business_page' navigation={navigation} />
            </BannerSection>
        </HomeContainer>
    )
}
