import React from 'react'
import { View } from 'react-native'
import { useLanguage } from 'ordering-components-external/native'
import { Fade, Placeholder, PlaceholderLine } from 'rn-placeholder';
import { useTheme } from 'styled-components/native'
import { OText } from '../shared';
import { WalletTransactionItem } from '../WalletTransactionItem'
import { NotFoundSource } from '../NotFoundSource';

import {
  Container,
  TransactionsWrapper
} from './styles'

export const WalletTransactions = (props: any) => {
  const {
    transactionsList,
    currentWalletSelected
  } = props

  const theme = useTheme()
  const [, t] = useLanguage()

  return (
    <Container>
      <View style={{ width: '100%', paddingHorizontal: 1, paddingBottom: 40 }}>
        {!transactionsList?.loading &&
          !transactionsList?.error &&
          transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length > 0 &&
          (
            <>
              <OText style={{ fontSize: 20, color: theme.colors.textNormal, marginBottom: 30 }}>
                {t('TRANSACTIONS_HISTORY', 'Transactions history')}
              </OText>
              <TransactionsWrapper>
                {transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.map((transaction: any, i: number) => (
                  <WalletTransactionItem
                    idx={i}
                    type={currentWalletSelected?.type}
                    key={transaction.id}
                    item={transaction}
                    withFormatPrice={currentWalletSelected?.type === 'cash'}
                  />
                ))}
              </TransactionsWrapper>
            </>
          )}

        {(transactionsList?.loading || !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) && (
          <View>
            {[...Array(4).keys()].map(i => (
              <View style={{ marginBottom: 10 }} key={i}>
                <Placeholder Animation={Fade}>
                  <PlaceholderLine width={100} height={100} style={{ marginBottom: 0, borderRadius: 8 }} />
                </Placeholder>
              </View>
            ))}
          </View>
        )}

        {!transactionsList?.loading &&
          !(transactionsList?.loading && transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]) &&
          (transactionsList?.error ||
            !transactionsList.list?.[`wallet:${currentWalletSelected?.id}`]?.length) &&
          (
            <OText color={theme.colors.disabled} size={16} style={{ textAlign: 'center' }}>
              {transactionsList?.error
                ? t('ERROR_NOT_FOUND_TRANSACTIONS', 'Sorry, an error has occurred')
                : t('NOT_FOUND_TRANSACTIONS', 'No transactions to show at this time.')
              }
            </OText>
          )}
      </View>
    </Container>
  )
}
