Untitled

import {StatusBar, StyleSheet} from 'react-native';

import {isTablet} from 'react-native-device-info';

import {
  colorsV2,
  radius,
  sizes,
  spacing,
  spacingV2,
  colors as staticColor,
  typographics,
} from '@design-system';
import {ColorItem} from '@hooks/global/useTheme/themeColors';
import {isAndroid} from '@utils/iPhoneXHelpers';

const cardWalletHeight =
  sizes.widthPercentageToDP(12) +
  sizes.widthPercentageToDP('6.5%') +
  sizes.widthPercentageToDP('8%') +
  sizes.widthPercentageToDP('6%') +
  (sizes.widthPercentageToDP('2%') + sizes.widthPercentageToDP('4%') + 32);

export const headerHeight =
  cardWalletHeight + ((StatusBar.currentHeight ?? 0) + spacing[2] + spacing[2]);

const style = (colors: ColorItem, theme) => {
  return StyleSheet.create({
    container: {
      flex: 1,
    },
    containerBg: {
      width: sizes.widthPercentageToDP('100%'),
      height: sizes.heightPercentageToDP('75%'),
    },
    scrollViewContent: {
      height: '100%',
    },
    header: {
      height: headerHeight,
    },
    headerIos: {
      height: headerHeight,
    },
    backgroundImage: {
      flex: 1,
      resizeMode: 'cover',
    },
    walletCard: {
      height: 175,
      zIndex: -1,
    },
    walletHeaderContainer: {
      marginHorizontal: spacing[3],
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: (StatusBar.currentHeight ?? 0) + spacing[2],
    },
    walletTitleText: {
      ...typographics.title,
      color: colors.primary.black,
    },
    questionIcon: {
      width: 24,
      height: 24,
    },
    walletCardContainer: {
      overflow: 'hidden',
      marginTop: spacing[2],
      marginBottom: spacing[1],
      marginHorizontal: spacing[3],
      borderRadius: radius[2],
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
      paddingVertical: spacing[3],
      paddingLeft: spacing[3],
      backgroundColor: 'colors.glass.glassWhite50.background',
      justifyContent: 'space-between',
    },
    availableVoucherContainer: {
      overflow: 'hidden',
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: isAndroid() ? spacing[1] : spacing[3],
      marginHorizontal: spacing[3],
      borderRadius: radius[4],
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
      height: isTablet()
        ? sizes.widthPercentageToDP(10)
        : sizes.widthPercentageToDP(14),
      backgroundColor: colors.glass.glassWhite50.background,
    },
    voucherIconContainer: {alignItems: 'center'},
    notifBadge: {
      backgroundColor: colors.product.red,
      width: 8,
      height: 8,
      position: 'absolute',
      zIndex: 1,
      borderWidth: 1,
      borderColor: colors.primary.white,
      borderRadius: 6,
      right: 2,
      top: 1,
    },
    voucherIcon: {
      width: 25,
      height: 25,
    },
    chevronRightIcon: {
      color: colors.primary.black,
      width: 17,
      height: 17,
    },
    voucherCardTitle: {
      paddingHorizontal: spacing[2],
      paddingRight: spacing[9],
      ...typographics.paragraph,
      color: colors.primary.black,
    },
    walletCardCashbackContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      marginTop: spacing[1],
      paddingVertical: spacing[1],
      paddingHorizontal: spacing[3],
      backgroundColor: colors.glass.glassWhite50.background,
      borderTopColor: colors.voucher.cashbackBalanceWalletBorder,
      borderBottomColor: colors.voucher.cashbackBalanceWalletBorder,
      borderTopWidth: 1,
      borderBottomWidth: 1,
      marginLeft: spacing[3] - spacing[6],
      marginRight: spacing[3] - spacing[6],
    },
    inCashbackContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
    },
    cashbackTitle: {
      ...typographics.caption,
      color: colors.primary.black,
      fontWeight: '500',
    },
    cashbackValue: {
      ...typographics.label,
      color: colors.primary.black,
      fontWeight: '700',
    },
    cashbackIcon: {
      marginLeft: spacing[1],
    },
    cashbackEntryIcon: {
      color: colors.primary.black,
      width: 15,
      height: 15,
    },
    cashbackInfoDesc: {
      ...typographics.paragraph,
      color: colors.shade.darkGrey,
    },
    cashbackInfoBoldDesc: {
      ...typographics.paragraphBold,
    },
    walletCardTitle: {
      ...typographics.paragraph,
      color: colors.primary.black,
    },
    walletCardPoint: {
      ...typographics.title,
      color: colors.primary.black,
    },
    walletCardButtons: {
      marginTop: spacing[2],
      flexDirection: 'row',
      justifyContent: 'space-between',
      paddingRight: spacing[3],
    },
    walletCardButtonText: {
      marginTop: spacing[1],
      color: colors.primary.black,
      ...typographics.action,
    },
    bottomPanelIos: {
      flex: 1,
      marginTop: spacing[3],
    },
    bottomPanel: {
      flex: 1,
      borderRadius: radius[3],
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      borderWidth: 1,
      borderColor: colors.glass.glassWhite70.border,
      backgroundColor: colors.glassWallet.bottomPanel,
      position: 'absolute',
      left: 0,
      right: 0,
      zIndex: 2,
      bottom: 0,
    },
    gradientContainer: {
      flex: 1,
      borderRadius: radius[3],
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0,
      paddingTop: spacing[3],
    },
    transactionSection: {
      flex: 1,
      paddingVertical: spacing[3],
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      borderWidth: 1,
      borderColor: colors.primary.white,
      backgroundColor: 'rgba(255, 255, 255, 0.8)',
    },
    transactionTitle: {
      ...typographics.subTitle,
      color: colors.primary.black,
      marginHorizontal: spacing[3],
      marginBottom: spacing[1],
    },
    white: {
      position: 'absolute',
      width: '100%',
      top: 0,
      height: isAndroid() ? 25 : 50,
      backgroundColor: colors.glassWallet.bgOnScroll, // #0C373F
    },
    animated: {
      height: '100%',
      borderRadius: 24,
    },
    button2Section: {
      height: isTablet() ? 70 : 40,
      flex: 1,
    },
    marginButton: {
      width: spacing[1],
    },
    button2SectionTxt: {
      ...typographics.labelBold,
    },
    disabledFeature: {
      opacity: 0.3,
    },
    errorWrapper: {
      justifyContent: 'center',
      alignItems: 'center',
      flex: 1,
    },
    walletBalance: {flex: 0},
    walletCashbackBalance: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    currencyText: {
      marginRight: 12,
    },
    flexRow: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    spaceBetween: {
      justifyContent: 'space-between',
    },
    iddrIcon: {
      width: 16,
      height: 16,
      opacity: 0.6,
    },
    iddrLogo: {
      width: isTablet() ? 60 : 24,
      height: isTablet() ? 60 : 24,
      resizeMode: 'contain',
      marginRight: spacing[1],
    },
    iddrLogoSmall: {
      width: 20,
      height: 20,
      resizeMode: 'contain',
    },
    iddrEarn: {
      backgroundColor: colors.product.green,
      paddingVertical: spacing[0],
      paddingRight: spacing[1],
      paddingLeft: spacing[2],
      borderBottomLeftRadius: radius[4],
      borderTopLeftRadius: radius[4],
    },
    iddrEarnText: {
      ...typographics.labelBold,
      color: colors.constants.white,
      marginRight: spacing[0],
    },
    nanoPoints: {
      backgroundColor: colors.product.green,
      paddingVertical: spacing[0],
      paddingHorizontal: spacing[2],
      borderRadius: radius[4],
      marginVertical: spacing[1],
      flexDirection: 'row',
      alignItems: 'center',
      flex: 0,
      alignSelf: 'flex-start',
    },
    nanoPointsRightIcon: {
      color: colors.constants.white,
      width: 12,
      height: 12,
    },
    cashbackContainer: {
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: colors.glass.glassWhite50.background,
      marginBottom: isAndroid() ? spacing[1] : spacing[3],
      marginHorizontal: spacing[3],
      borderRadius: radius[4],
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
    },
    cashback: {
      paddingVertical: spacing[1],
      justifyContent: 'space-between',
      width: '100%',
      paddingHorizontal: spacing[3],
    },
    marginR4: {
      marginRight: spacing[1],
    },
    carousel: {
      marginTop: spacing[2],
      marginBottom: spacing[1],
    },
    containerDot: {
      paddingVertical: 0,
      paddingHorizontal: 0,
      paddingRight: 0,
      paddingLeft: 0,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: spacing[0],
    },
    dotContainer: {
      marginHorizontal: 4,
    },
    dotStyle: {
      width: 18,
      height: 4,
      paddingLeft: 0,
      paddingRight: 0,
      borderRadius: radius[4],
    },
    carouselCard: {
      paddingVertical: spacing[2],
      paddingLeft: spacing[2],
      borderRadius: radius[2],
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
      backgroundColor: colors.glass.glassWhite80.background,
      justifyContent: 'space-between',
      marginHorizontal: spacing[0],
    },
    carouselTitle: {
      color: colors.primary.black,
      fontFamily: 'Gilroy-Medium',
    },
    carouselAmount: {
      ...typographics.title,
      color: colors.primary.black,
    },
    marginT0: {
      marginTop: spacing[0],
    },
    marginT1: {
      marginTop: spacing[1],
    },
    marginT2: {
      marginTop: spacing[2],
    },
    divider: {
      backgroundColor: colors.shade.grey2,
      width: '95%',
      height: 1,
      marginVertical: spacing[2],
    },
    carouselSubText: {
      ...typographics.paragraph,
      color: colors.primary.black,
    },
    infoIcon: {
      width: 16,
      height: 16,
      marginLeft: spacing[1],
    },
    arrowIcon: {
      width: 24,
      height: 24,
      resizeMode: 'contain',
    },
    bottomIcon: {
      width: 28,
      height: 28,
      resizeMode: 'contain',
      marginRight: spacing[1],
    },
    subText: {
      color: colors.primary.black,
      ...typographics.label,
      flexWrap: 'wrap',
    },
    bottomValue: {
      color: colors.primary.black,
      ...typographics.labelBold,
    },
    highlightedText: {
      color: colors.constants.white,
      ...typographics.labelBold,
    },
    highlightedContainer: {
      alignSelf: 'flex-end',
      paddingVertical: spacing[0],
      paddingRight: spacing[1],
      paddingLeft: spacing[2],
      borderTopLeftRadius: radius[2],
      borderBottomLeftRadius: radius[2],
    },
    paddingR2: {
      paddingRight: spacing[2],
    },
    walletButtonContainer: {
      marginVertical: spacing[1],
      marginHorizontal: spacing[2],
      flexDirection: 'row',
      justifyContent: 'space-between',
      paddingVertical: spacing[2],
      paddingHorizontal: spacing[5],
      borderRadius: 48,
      borderColor: colors.glass.glassWhite50.border,
      borderWidth: 1,
      backgroundColor: colors.glass.glassWhite80.background,
    },
    marginR2: {
      marginRight: spacing[3],
    },
    filler3: {
      height: spacing[3],
    },
    filler1: {
      height: spacing[0],
    },
    paddingH2: {
      paddingHorizontal: spacing[2],
    },
    shimmerContainer: {
      opacity: 0.3,
    },
    activityIndicator: {
      position: 'absolute',
      left: '50%',
      top: '20%',
    },
    iconWSecContainer: {
      borderRadius: radius[4],
      backgroundColor: colors.primary.black,
      justifyContent: 'center',
      alignItems: 'center',
    },
    eliteBannerWalletText: {
      ...typographics.paragraphBold,
      color: colors.primary.black,
    },
    cardView: {
      alignSelf: 'center',
      borderRadius: sizes.widthPercentageToDP(6),
      flexDirection: 'row',
      padding: sizes.widthPercentageToDP(2.5),
    },
    cardViewPressable: {
      flexDirection: 'row',
    },
    maskedTextKYC: {
      height: 40,
      width: 100,
    },
    textStepDescColor: {
      color: staticColor.brand.purpleDM,
    },
    textStepDescColorSelected: {
      fontFamily: 'Gilroy-Bold',
      marginTop: 2,
    },
    flexLinear: {flex: 1},
    kycBannerTitle: {
      ...typographics.labelBold,
      fontWeight: '700',
      color: colors.primary.black,
      marginTop: spacingV2(0.6, 'y'),
    },
    bannerImage: {
      width: 30,
      height: 30,
      alignSelf: 'center',
      marginRight: spacingV2(0.5, 'y'),
    },
    lottieLoadingIcon: {
      height: spacing[3],
      aspectRatio: 1,
    },
    lottieLoadingIconContainer: {
      borderRadius: radius[4],
      backgroundColor: colorsV2.primary.black1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
};

export default style;