import React, { useState, useEffect } from 'react'
import { StyleSheet, View } from 'react-native';
import { useTheme } from 'styled-components/native'

import {
  WalletList,
  useLanguage,
  useUtils,
  useConfig
} from 'ordering-components-Ubanku-Custom/native'

import {
  Container,
  BalanceElement,
  SectionContent,
} from './styles'

import { OText } from '../shared';
import { NotFoundSource } from '../NotFoundSource';

const WalletsUI = (props: any) => {
  const {
    walletList,
    userLoyaltyLevel,
    getWallets,
    refreshWallets,
    setRefreshWallets
  } = props

  const [, t] = useLanguage()
  const theme = useTheme()
  const [{ parsePrice }] = useUtils()
  const [{ configs }] = useConfig()

  const styles = StyleSheet.create({
    logoStyle: {
      width: 120,
      height: 120,
      borderRadius: 8,
      borderWidth: 1,
      borderColor: theme.colors.border,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
    },
    divider: {
      borderWidth: 0.5,
      width: '100%'
    }
  });

  const cashWallet = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === 'cash')) ?? null
  const pointsWallet = (walletList.wallets?.length > 0 && walletList.wallets?.find((w: any) => w.type === 'credit_point')) ?? null


  useEffect(() => {
    if (refreshWallets) {
      getWallets()
      setRefreshWallets && setRefreshWallets(false)
    }
  }, [refreshWallets])

  return (
    <>
      <Container>
        {!walletList.loading &&
          !userLoyaltyLevel.loading &&
          !walletList.error &&
          walletList.wallets?.length > 0 &&
          (
            <>
              <SectionContent>
                <BalanceElement>
                  <OText size={20} style={{ fontWeight: '600' }}>
                    {parsePrice(cashWallet?.balance)} {configs?.stripe_currency?.value}
                  </OText>
                  <View style={styles.divider} />
                  <OText>
                    {t('SAVING', 'Saving')}
                  </OText>
                </BalanceElement>
                <BalanceElement>
                  <OText size={20} style={{ fontWeight: '600' }}>
                    {parsePrice(pointsWallet?.balance)} {configs?.stripe_currency?.value}
                  </OText>
                  <View style={styles.divider} />
                  <OText style={{fontWeight: '500'}}>
                    {t('INVESTMENT', 'Investment')}
                  </OText>
                </BalanceElement>
              </SectionContent>
            </>
          )}

        {/* {(walletList?.loading || userLoyaltyLevel.loading) && (
          <View>
            <View>
              <Placeholder Animation={Fade}>
                <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
              </Placeholder>
            </View>
            <View style={{ marginTop: 10, marginBottom: 20 }}>
              <Placeholder Animation={Fade}>
                <PlaceholderLine width={100} height={40} style={{ marginBottom: 0 }} />
              </Placeholder>
            </View>
          </View>
        )} */}

        {!walletList?.loading && !userLoyaltyLevel.loading && (walletList?.error || !walletList?.wallets?.length) && (
          <NotFoundSource
            content={walletList?.error
              ? t('ERROR_NOT_FOUND_WALLETS', 'Sorry, an error has occurred')
              : t('NOT_FOUND_WALLETS', 'No wallets to show at this time.')
            }
          />
        )}
      </Container>

    </>
  )
}

export const Wallets = (props: any) => {
  const [{ configs }] = useConfig()

  const isWalletCashEnabled = configs?.wallet_cash_enabled?.value === '1'
  const isWalletPointsEnabled = configs?.wallet_credit_point_enabled?.value === '1'

  const walletsProps = {
    ...props,
    UIComponent: WalletsUI,
    isWalletCashEnabled,
    isWalletPointsEnabled
  }
  return (
    <WalletList {...walletsProps} />
  )
}
