import { StyleSheet } from 'react-native';
import Arrow from './assets/icons/large-arrow.svg';
import IconDelete from './assets/icons/trash.svg';
import IconEdit from './assets/icons/pencil.svg';
import IconCode from './assets/icons/code.svg';
import ActivityIndicator from './assets/img/activity-indicator-circle.svg';
import AppLockout from './assets/img/app-lockout.svg';
import Biometrics from './assets/img/biometrics.svg';
import ContactBook from './assets/img/contact-book.svg';
import CredentialDeclined from './assets/img/credential-declined.svg';
import DeleteNotification from './assets/img/delete-notification.svg';
import EmptyWallet from './assets/img/empty-wallet.svg';
import IconCredentialOfferDark from './assets/img/icon-credential-offer-dark.svg';
import IconCredentialOfferLight from './assets/img/icon-credential-offer-light.svg';
import IconInfoRecievedDark from './assets/img/icon-info-recieved-dark.svg';
import IconInfoRecievedLight from './assets/img/icon-info-recieved-light.svg';
import IconInfoSentDark from './assets/img/icon-info-sent-dark.svg';
import IconInfoSentLight from './assets/img/icon-info-sent-light.svg';
import IconProofRequestDark from './assets/img/icon-proof-request-dark.svg';
import IconProofRequestLight from './assets/img/icon-proof-request-light.svg';
import Logo from './assets/img/logo.svg';
import NoInfoShared from './assets/img/no_information_shared.svg';
import Preface from './assets/img/preface.svg';
import UpdateAvailable from './assets/img/update-available.svg';
import ProofRequestDeclined from './assets/img/proof-declined.svg';
import VerifierRequestDeclined from './assets/img/verifier-request-declined.svg';
import Wallet from './assets/img/wallet.svg';
import CheckInCircle from './assets/img/check-in-circle.svg';
import CredentialCard from './assets/img/credential-card.svg';
import WalletBack from './assets/img/wallet-back.svg';
import WalletFront from './assets/img/wallet-front.svg';
import CredentialInHand from './assets/img/credential-in-hand.svg';
import CredentialList from './assets/img/credential-list.svg';
import ScanShare from './assets/img/scan-share.svg';
import SecureCheck from './assets/img/secure-check.svg';
import SecureImage from './assets/img/secure-image.svg';
import InformationReceived from './assets/img/information-received.svg';
import PushNotificationImg from './assets/img/push-notifications.svg';
import ChatLoading from './assets/img/chat-loading.svg';
import HistoryCardAcceptedIcon from './assets/img/HistoryCardAcceptedIcon.svg';
import HistoryCardExpiredIcon from './assets/img/HistoryCardExpiredIcon.svg';
import HistoryCardRevokedIcon from './assets/img/HistoryCardRevokedIcon.svg';
import HistoryInformationSentIcon from './assets/img/HistoryInformationSentIcon.svg';
import HistoryPinUpdatedIcon from './assets/img/HistoryPinUpdatedIcon.svg';
import IconChevronRight from './assets/img/IconChevronRight.svg';
import HomeCenterImg from './assets/img/home-center-img.svg';
import IconWarning from './assets/img/exclamation-mark.svg';
import IconError from './assets/img/error-filled.svg';
import TabOneFocusedIcon from './assets/img/message-text-icon.svg';
import TabOneIcon from './assets/img/message-text-icon-outline.svg';
import TabTwoIcon from './assets/img/qrcode-scan-icon.svg';
import TabThreeFocusedIcon from './assets/img/wallet-icon.svg';
import TabThreeIcon from './assets/img/wallet-icon-outline.svg';
export const borderRadius = 4;
export const heavyOpacity = 0.7;
export const mediumOpacity = 0.5;
export const lightOpacity = 0.35;
export const zeroOpacity = 0.0;
export const borderWidth = 2;
export const maxFontSizeMultiplier = 2;
const Spacing = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
  xl: 32,
  xxl: 40
};
const GrayscaleColors = {
  black: '#000000',
  darkGrey: '#313132',
  mediumGrey: '#606060',
  lightGrey: '#D3D3D3',
  veryLightGrey: '#F2F2F2',
  white: '#FFFFFF'
};
const InlineErrorMessageColors = {
  error: '#ff0000',
  warning: '#ff9000'
};
const BrandColors = {
  primary: '#42803E',
  primaryDisabled: `rgba(53, 130, 63, ${lightOpacity})`,
  secondary: '#FFFFFFFF',
  secondaryDisabled: `rgba(53, 130, 63, ${heavyOpacity})`,
  tertiary: '#FFFFFFFF',
  tertiaryDisabled: `rgba(53, 130, 63, ${heavyOpacity})`,
  primaryLight: `rgba(53, 130, 63, ${lightOpacity})`,
  highlight: '#FCBA19',
  primaryBackground: '#000000',
  secondaryBackground: '#313132',
  tertiaryBackground: '#313132',
  modalPrimary: '#42803E',
  modalSecondary: '#FFFFFFFF',
  modalTertiary: '#FFFFFFFF',
  modalPrimaryBackground: '#000000',
  modalSecondaryBackground: '#313132',
  modalTertiaryBackground: '#313132',
  modalIcon: GrayscaleColors.white,
  unorderedList: GrayscaleColors.white,
  unorderedListModal: GrayscaleColors.white,
  link: '#42803E',
  credentialLink: '#42803E',
  text: GrayscaleColors.white,
  icon: GrayscaleColors.white,
  headerIcon: GrayscaleColors.white,
  headerText: GrayscaleColors.white,
  buttonText: GrayscaleColors.white,
  tabBarInactive: GrayscaleColors.white,
  inlineError: InlineErrorMessageColors.error,
  inlineWarning: InlineErrorMessageColors.warning
};
const SemanticColors = {
  error: '#D8292F',
  success: '#2E8540',
  focus: '#3399FF'
};
const NotificationColors = {
  success: '#313132',
  successBorder: '#2E8540',
  successIcon: '#2E8540',
  successText: '#FFFFFF',
  info: '#313132',
  infoBorder: '#0099FF',
  infoIcon: '#0099FF',
  infoText: '#FFFFFF',
  warn: '#313132',
  warnBorder: '#FCBA19',
  warnIcon: '#FCBA19',
  warnText: '#FFFFFF',
  error: '#313132',
  errorBorder: '#D8292F',
  errorIcon: '#D8292F',
  errorText: '#FFFFFF',
  popupOverlay: `rgba(0, 0, 0, ${mediumOpacity})`
};
export const ColorPalette = {
  brand: BrandColors,
  semantic: SemanticColors,
  notification: NotificationColors,
  grayscale: GrayscaleColors
};

/**
 * Creates a text theme based on the provided color pallet.
 *
 * @param {{ ColorPalette: IColorPalette }} theme - The theme object containing the color pallet
 * @returns {*} {ITextTheme} - The created text theme
 */
export function createTextTheme(theme) {
  return StyleSheet.create({
    headingOne: {
      fontSize: 38,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    headingTwo: {
      fontSize: 32,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    headingThree: {
      fontSize: 26,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    headingFour: {
      fontSize: 21,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    normal: {
      fontSize: 18,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.text
    },
    bold: {
      fontSize: 18,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    label: {
      fontSize: 14,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    labelTitle: {
      fontSize: 16,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    labelSubtitle: {
      fontSize: 14,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.text
    },
    labelText: {
      fontSize: 10,
      fontWeight: 'normal',
      fontStyle: 'italic',
      color: theme.ColorPalette.brand.text
    },
    caption: {
      fontSize: 14,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.text
    },
    title: {
      fontSize: 20,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.text
    },
    headerTitle: {
      fontSize: 28,
      fontWeight: 'bold',
      color: theme.ColorPalette.brand.headerText
    },
    modalNormal: {
      fontSize: 18,
      fontWeight: 'normal',
      color: theme.ColorPalette.grayscale.white
    },
    modalTitle: {
      fontSize: 24,
      fontWeight: 'bold',
      color: theme.ColorPalette.grayscale.white
    },
    modalHeadingOne: {
      fontSize: 38,
      color: theme.ColorPalette.grayscale.white,
      fontWeight: 'bold'
    },
    modalHeadingThree: {
      fontSize: 26,
      color: theme.ColorPalette.grayscale.white,
      fontWeight: 'bold'
    },
    popupModalText: {
      fontSize: 18,
      fontWeight: 'normal',
      color: theme.ColorPalette.grayscale.white
    },
    settingsText: {
      fontSize: 21,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.text
    },
    inlineErrorText: {
      fontSize: 16,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.inlineError
    },
    inlineWarningText: {
      fontSize: 16,
      fontWeight: 'normal',
      color: theme.ColorPalette.brand.inlineWarning
    }
  });
}
export const TextTheme = createTextTheme({
  ColorPalette
});

/**
 * Creates a theme for inputs based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme; borderRadius: number }} theme - The theme object containing the color pallet, text theme, and border radius
 * @returns {*} {IInputs} - The created inputs theme
 */
export function createInputsTheme(theme) {
  return StyleSheet.create({
    label: {
      ...theme.TextTheme.label
    },
    textInput: {
      padding: 10,
      borderRadius,
      fontSize: 16,
      backgroundColor: theme.ColorPalette.brand.primaryBackground,
      color: theme.ColorPalette.notification.infoText,
      borderWidth: 2,
      borderColor: theme.ColorPalette.brand.secondary
    },
    singleSelectText: {
      ...theme.TextTheme.normal
    },
    singleSelectIcon: {
      color: theme.ColorPalette.grayscale.white
    },
    checkBoxColor: {
      color: theme.ColorPalette.brand.primary
    },
    checkBoxText: {
      ...theme.TextTheme.normal
    },
    inputSelected: {
      borderColor: theme.ColorPalette.brand.primary
    },
    singleSelect: {
      padding: 12,
      borderRadius: theme.borderRadius * 2,
      backgroundColor: theme.ColorPalette.brand.secondaryBackground
    }
  });
}
export const Inputs = createInputsTheme({
  ColorPalette,
  TextTheme,
  borderRadius
});

/**
 * Creates a theme for buttons based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {IButtons} - The created buttons theme
 */
export function createButtonsTheme(theme) {
  const textStyles = StyleSheet.create({
    criticalText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    criticalTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    primaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    primaryTextDisabled: {
      ...theme.TextTheme.bold,
      textAlign: 'center'
    },
    secondaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.primary,
      textAlign: 'center'
    },
    secondaryTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.secondaryDisabled,
      textAlign: 'center'
    },
    tertiaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.primary,
      textAlign: 'center'
    },
    tertiaryTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.tertiaryDisabled,
      textAlign: 'center'
    },
    modalCriticalText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    modalCriticalTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    modalPrimaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    modalPrimaryTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.buttonText,
      textAlign: 'center'
    },
    modalSecondaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.modalPrimary,
      textAlign: 'center'
    },
    modalSecondaryTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.secondaryDisabled,
      textAlign: 'center'
    },
    modalTertiaryText: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.modalPrimary,
      textAlign: 'center'
    },
    modalTertiaryTextDisabled: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.tertiaryDisabled,
      textAlign: 'center'
    }
  });
  const viewStyles = StyleSheet.create({
    critical: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.semantic.error
    },
    criticalDisabled: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: `rgba(216, 41, 47, ${lightOpacity})`
    },
    primary: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.primary
    },
    primaryDisabled: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.primaryDisabled
    },
    secondary: {
      padding: 16,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: theme.ColorPalette.brand.primary
    },
    secondaryDisabled: {
      padding: 16,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: theme.ColorPalette.brand.secondaryDisabled
    },
    tertiary: {
      padding: 16
    },
    tertiaryDisabled: {
      padding: 16
    },
    modalCritical: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.primary
    },
    modalCriticalDisabled: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.primaryDisabled
    },
    modalPrimary: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.modalPrimary
    },
    modalPrimaryDisabled: {
      padding: 16,
      borderRadius: 4,
      backgroundColor: theme.ColorPalette.brand.primaryDisabled
    },
    modalSecondary: {
      padding: 16,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: theme.ColorPalette.brand.modalPrimary
    },
    modalSecondaryDisabled: {
      padding: 16,
      borderRadius: 4,
      borderWidth: 2,
      borderColor: theme.ColorPalette.brand.secondaryDisabled
    },
    modalTertiary: {
      padding: 16
    },
    modalTertiaryDisabled: {
      padding: 16
    }
  });
  return {
    ...textStyles,
    ...viewStyles
  };
}
export const Buttons = createButtonsTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a theme for list items based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {IListItems} - The created list items theme
 */
export function createListItemsTheme(theme) {
  const testStyles = StyleSheet.create({
    credentialTitle: {
      ...theme.TextTheme.headingFour
    },
    credentialDetails: {
      ...theme.TextTheme.caption
    },
    credentialOfferTitle: {
      ...theme.TextTheme.modalHeadingThree,
      fontWeight: 'normal'
    },
    credentialOfferDetails: {
      ...theme.TextTheme.normal
    },
    credentialIconColor: {
      color: theme.ColorPalette.notification.infoText
    },
    contactTitle: {
      color: theme.ColorPalette.brand.text
    },
    contactDate: {
      color: theme.ColorPalette.brand.text,
      marginTop: 10
    },
    contactIcon: {
      color: theme.ColorPalette.grayscale.white
    },
    recordAttributeLabel: {
      ...theme.TextTheme.bold
    },
    recordLink: {
      color: theme.ColorPalette.brand.link
    },
    recordAttributeText: {
      ...theme.TextTheme.normal
    },
    proofIcon: {
      ...theme.TextTheme.headingOne
    },
    proofError: {
      color: theme.ColorPalette.semantic.error
    },
    avatarText: {
      ...theme.TextTheme.headingTwo,
      fontWeight: 'normal'
    },
    avatarCircle: {
      borderRadius: theme.TextTheme.headingTwo.fontSize,
      borderColor: theme.TextTheme.headingTwo.color,
      width: (theme.TextTheme.headingTwo.fontSize ?? 32) * 2,
      height: (theme.TextTheme.headingTwo.fontSize ?? 32) * 2
    },
    requestTemplateIconColor: {
      color: theme.ColorPalette.notification.infoText
    },
    requestTemplateTitle: {
      color: theme.ColorPalette.grayscale.black,
      fontWeight: 'bold',
      fontSize: 16
    },
    requestTemplateDetails: {
      color: theme.ColorPalette.grayscale.black,
      fontWeight: 'normal',
      fontSize: 16
    },
    requestTemplateZkpLabel: {
      color: theme.ColorPalette.grayscale.mediumGrey,
      fontSize: 12
    },
    requestTemplateIcon: {
      color: theme.ColorPalette.grayscale.black,
      fontSize: 36
    },
    requestTemplateDate: {
      color: theme.ColorPalette.grayscale.mediumGrey,
      fontSize: 10
    }
  });
  const viewStyles = StyleSheet.create({
    credentialBackground: {
      backgroundColor: theme.ColorPalette.brand.secondaryBackground
    },
    credentialOfferBackground: {
      backgroundColor: theme.ColorPalette.brand.modalPrimaryBackground
    },
    revoked: {
      backgroundColor: theme.ColorPalette.notification.error,
      borderColor: theme.ColorPalette.notification.errorBorder
    },
    contactBackground: {
      backgroundColor: theme.ColorPalette.brand.secondaryBackground
    },
    contactIconBackground: {
      backgroundColor: theme.ColorPalette.brand.primary
    },
    recordContainer: {
      backgroundColor: theme.ColorPalette.brand.secondaryBackground
    },
    recordBorder: {
      borderBottomColor: theme.ColorPalette.brand.primaryBackground
    },
    emptyList: {
      ...theme.TextTheme.normal
    },
    requestTemplateBackground: {
      backgroundColor: theme.ColorPalette.grayscale.white
    }
  });
  return {
    ...testStyles,
    ...viewStyles
  };
}
export const ListItems = createListItemsTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a theme for tabs based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {ITabTheme} - The created tab theme
 */
export function createTabTheme(theme) {
  const textStyles = StyleSheet.create({
    tabBarTextStyle: {
      ...theme.TextTheme.labelSubtitle,
      paddingBottom: 5
    },
    tabBarButtonIconStyle: {
      color: theme.ColorPalette.brand.headerIcon
    }
  });
  const viewStyles = StyleSheet.create({
    tabBarStyle: {
      height: 60,
      backgroundColor: theme.ColorPalette.brand.secondaryBackground,
      shadowOffset: {
        width: 0,
        height: -3
      },
      shadowRadius: 6,
      shadowColor: theme.ColorPalette.grayscale.black,
      shadowOpacity: 0.1,
      borderTopWidth: 0,
      paddingBottom: 0
    },
    tabBarContainerStyle: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center'
    },
    focusTabIconStyle: {
      height: 60,
      width: 60,
      backgroundColor: theme.ColorPalette.brand.primary,
      borderRadius: 60,
      justifyContent: 'center',
      alignItems: 'center'
    },
    focusTabActiveTintColor: {
      backgroundColor: theme.ColorPalette.brand.secondary
    }
  });
  return {
    ...textStyles,
    ...viewStyles,
    tabBarActiveTintColor: theme.ColorPalette.brand.primary,
    tabBarInactiveTintColor: theme.ColorPalette.brand.tabBarInactive,
    tabBarSecondaryBackgroundColor: theme.ColorPalette.brand.secondaryBackground
  };
}
export const TabTheme = createTabTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a navigation theme based on the provided color pallet.
 *
 * @param {{ ColorPalette: IColorPalette }} theme - The theme object containing the color pallet
 * @returns {*} {INavigationTheme} - The created navigation theme
 */
export function createNavigationTheme(theme) {
  return {
    dark: true,
    colors: {
      primary: theme.ColorPalette.brand.primary,
      background: theme.ColorPalette.brand.primaryBackground,
      card: theme.ColorPalette.brand.primary,
      text: theme.ColorPalette.grayscale.white,
      border: theme.ColorPalette.grayscale.white,
      notification: theme.ColorPalette.grayscale.white
    }
  };
}
export const NavigationTheme = createNavigationTheme({
  ColorPalette
});

/**
 * Creates a home theme based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {IHomeTheme} - The created home theme
 */
export function createHomeTheme(theme) {
  return StyleSheet.create({
    welcomeHeader: {
      ...theme.TextTheme.headingOne
    },
    credentialMsg: {
      ...theme.TextTheme.normal
    },
    notificationsHeader: {
      ...theme.TextTheme.headingThree
    },
    noNewUpdatesText: {
      ...theme.TextTheme.normal,
      color: theme.ColorPalette.notification.infoText
    },
    link: {
      ...theme.TextTheme.normal,
      color: theme.ColorPalette.brand.link
    }
  });
}
export const HomeTheme = createHomeTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a settings theme based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {ISettingsTheme} - The created settings theme
 */
export function createSettingsTheme(theme) {
  const settingsTheme = StyleSheet.create({
    groupHeader: {
      ...theme.TextTheme.normal,
      marginBottom: 8
    },
    text: {
      ...theme.TextTheme.caption,
      color: theme.ColorPalette.grayscale.white
    }
  });
  return {
    ...settingsTheme,
    groupBackground: theme.ColorPalette.brand.secondaryBackground,
    iconColor: theme.ColorPalette.brand.text
  };
}
export const SettingsTheme = createSettingsTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a chat theme based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {IChatTheme} - The created chat theme
 */
export function createChatTheme(theme) {
  const textStyles = StyleSheet.create({
    timeStyleLeft: {
      color: theme.ColorPalette.grayscale.lightGrey,
      fontSize: 12,
      marginTop: 8
    },
    timeStyleRight: {
      color: theme.ColorPalette.grayscale.lightGrey,
      fontSize: 12,
      marginTop: 8
    },
    leftText: {
      color: theme.ColorPalette.brand.secondary,
      fontSize: theme.TextTheme.normal.fontSize
    },
    leftTextHighlighted: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.secondary
    },
    rightText: {
      color: theme.ColorPalette.brand.secondary,
      fontSize: theme.TextTheme.normal.fontSize
    },
    rightTextHighlighted: {
      ...theme.TextTheme.bold,
      color: theme.ColorPalette.brand.secondary
    },
    inputText: {
      lineHeight: undefined,
      fontWeight: '500',
      fontSize: theme.TextTheme.normal.fontSize
    },
    openButtonTextStyle: {
      fontSize: theme.TextTheme.normal.fontSize,
      fontWeight: 'bold',
      textAlign: 'center'
    },
    documentIcon: {
      color: theme.ColorPalette.grayscale.white
    }
  });
  const viewStyles = StyleSheet.create({
    containerStyle: {
      marginBottom: 16,
      marginLeft: 16,
      marginRight: 16,
      flexDirection: 'column',
      alignItems: 'flex-start',
      alignSelf: 'flex-end'
    },
    leftBubble: {
      backgroundColor: theme.ColorPalette.brand.secondaryBackground,
      borderRadius: 4,
      padding: 16,
      marginLeft: 16
    },
    rightBubble: {
      backgroundColor: theme.ColorPalette.brand.primaryLight,
      borderRadius: 4,
      padding: 16,
      marginRight: 16
    },
    sendContainer: {
      marginBottom: 4,
      paddingHorizontal: 4,
      justifyContent: 'center'
    },
    openButtonStyle: {
      borderRadius: 32,
      backgroundColor: theme.ColorPalette.brand.primary,
      paddingTop: 8,
      paddingBottom: 8,
      paddingLeft: 16,
      paddingRight: 16,
      marginTop: 16
    },
    documentIconContainer: {
      backgroundColor: theme.ColorPalette.brand.primary,
      alignSelf: 'flex-start',
      borderRadius: 4,
      marginBottom: 16,
      justifyContent: 'center',
      alignItems: 'center',
      width: 50,
      height: 50
    },
    inputToolbar: {
      backgroundColor: theme.ColorPalette.brand.secondary,
      shadowColor: theme.ColorPalette.brand.primaryDisabled,
      borderRadius: 10
    }
  });
  return {
    ...textStyles,
    ...viewStyles,
    placeholderText: theme.ColorPalette.grayscale.lightGrey,
    sendEnabled: theme.ColorPalette.brand.primary,
    sendDisabled: theme.ColorPalette.brand.primaryDisabled,
    options: theme.ColorPalette.brand.primary,
    optionsText: theme.ColorPalette.grayscale.black
  };
}
export const ChatTheme = createChatTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates an onboarding theme based on the provided color pallet and text theme.
 *
 * @param {{ ColorPalette: IColorPalette; TextTheme: ITextTheme }} theme - The theme object containing the color pallet and text theme
 * @returns {*} {IOnboardingTheme} - The created onboarding theme
 */
export function createOnboardingTheme(theme) {
  const textStyles = StyleSheet.create({
    pagerDot: {
      borderColor: theme.ColorPalette.brand.primary
    },
    pagerDotActive: {
      color: theme.ColorPalette.brand.primary
    },
    pagerDotInactive: {
      color: theme.ColorPalette.brand.secondary
    },
    pagerNavigationButton: {
      color: theme.ColorPalette.brand.primary,
      fontWeight: 'bold',
      fontSize: 18
    },
    headerText: {
      ...theme.TextTheme.bold
    },
    bodyText: {
      ...theme.TextTheme.normal
    }
  });
  const viewStyles = StyleSheet.create({
    container: {
      backgroundColor: theme.ColorPalette.brand.primaryBackground
    },
    carouselContainer: {
      backgroundColor: theme.ColorPalette.brand.primaryBackground
    }
  });
  return {
    ...textStyles,
    ...viewStyles,
    headerTintColor: ColorPalette.grayscale.white,
    imageDisplayOptions: {
      fill: ColorPalette.notification.infoText
    }
  };
}
export const OnboardingTheme = createOnboardingTheme({
  ColorPalette,
  TextTheme
});

/**
 * Creates a dialog theme based on the provided color pallet.
 *
 * @param {{ ColorPalette: IColorPalette }} theme - The theme object containing the color pallet
 * @returns {*} {IDialogTheme} - The created dialog theme
 */
export function createDialogTheme(theme) {
  return StyleSheet.create({
    modalView: {
      backgroundColor: theme.ColorPalette.brand.secondaryBackground
    },
    titleText: {
      color: theme.ColorPalette.grayscale.white
    },
    description: {
      color: theme.ColorPalette.grayscale.white
    },
    closeButtonIcon: {
      color: theme.ColorPalette.grayscale.white
    },
    carouselButtonText: {
      color: theme.ColorPalette.grayscale.white
    }
  });
}
export const DialogTheme = createDialogTheme({
  ColorPalette
});
export function createLoadingTheme(theme) {
  return {
    backgroundColor: theme.ColorPalette.brand.modalPrimaryBackground
  };
}
export const LoadingTheme = createLoadingTheme({
  ColorPalette
});

// NOTE: If ColorPalette or TextTheme is needed in this theme,
// we can convert this to a function like the others.
const PINEnterTheme = {
  image: {
    alignSelf: 'center',
    marginBottom: 20
  }
};
/**
 * Creates a theme for PIN input based on the provided color pallet.
 *
 * @param {{ ColorPalette: IColorPalette }} theme - The theme object containing the color pallet
 * @returns {*} {IPINInputTheme} - The created PIN input theme
 */
export function createPINInputTheme(theme) {
  const textStyles = StyleSheet.create({
    cellText: {
      color: theme.ColorPalette.brand.text
    },
    icon: {
      color: theme.ColorPalette.brand.headerIcon
    }
  });
  const viewStyles = StyleSheet.create({
    cell: {
      height: 48,
      paddingHorizontal: 2,
      backgroundColor: theme.ColorPalette.brand.secondaryBackground,
      borderColor: theme.ColorPalette.brand.secondaryBackground,
      borderWidth: 1
    },
    focussedCell: {
      borderColor: theme.ColorPalette.brand.headerIcon
    },
    codeFieldRoot: {
      justifyContent: 'flex-start',
      alignItems: 'center'
    },
    labelAndFieldContainer: {
      flexDirection: 'row',
      borderRadius: 5,
      paddingHorizontal: 12,
      paddingVertical: 4,
      alignItems: 'center',
      backgroundColor: theme.ColorPalette.brand.secondaryBackground,
      borderColor: theme.ColorPalette.brand.secondary,
      borderWidth: 1
    }
  });
  return {
    ...textStyles,
    ...viewStyles
  };
}
export const PINInputTheme = createPINInputTheme({
  ColorPalette
});

/**
 * Creates a theme for a separated PIN input based on the provided color pallet.
 *
 * @param {{ ColorPalette: IColorPalette }} theme - The theme object containing the color pallet
 * @returns {*} {ISeparatedPINInputTheme} - The created  PIN input theme
 */
export function createSeparatedPINInputTheme(theme) {
  const textStyles = StyleSheet.create({
    cellText: {
      color: theme.ColorPalette.brand.text
    },
    icon: {
      color: theme.ColorPalette.brand.headerIcon
    }
  });
  const viewStyles = StyleSheet.create({
    cell: {
      height: 48,
      paddingHorizontal: 4,
      backgroundColor: theme.ColorPalette.brand.secondaryBackground,
      borderColor: theme.ColorPalette.brand.secondary,
      borderWidth: 1,
      margin: 6,
      borderRadius: 4,
      flex: 1,
      flexShrink: 0
    },
    focussedCell: {
      borderColor: theme.ColorPalette.brand.headerIcon
    },
    codeFieldRoot: {
      justifyContent: 'space-between',
      alignItems: 'center'
    },
    labelAndFieldContainer: {
      flexDirection: 'row',
      paddingHorizontal: 0,
      paddingVertical: 4,
      alignItems: 'center'
    }
  });
  return {
    ...textStyles,
    ...viewStyles
  };
}
export const SeparatedPINInputTheme = createSeparatedPINInputTheme({
  ColorPalette
});
const CredentialCardShadowTheme = {
  shadowColor: '#000',
  shadowOffset: {
    width: 1,
    height: 1
  },
  shadowOpacity: 0.3
};
const SelectedCredTheme = {
  borderWidth: 5,
  borderRadius: 15,
  borderColor: ColorPalette.semantic.focus
};
export const Assets = {
  svg: {
    activityIndicator: ActivityIndicator,
    appLockout: AppLockout,
    biometrics: Biometrics,
    credentialDeclined: CredentialDeclined,
    deleteNotification: DeleteNotification,
    emptyWallet: EmptyWallet,
    contactBook: ContactBook,
    logo: Logo,
    proofRequestDeclined: ProofRequestDeclined,
    arrow: Arrow,
    iconCredentialOfferDark: IconCredentialOfferDark,
    iconCredentialOfferLight: IconCredentialOfferLight,
    iconInfoRecievedDark: IconInfoRecievedDark,
    iconInfoRecievedLight: IconInfoRecievedLight,
    iconInfoSentDark: IconInfoSentDark,
    iconInfoSentLight: IconInfoSentLight,
    iconProofRequestDark: IconProofRequestDark,
    iconProofRequestLight: IconProofRequestLight,
    preface: Preface,
    updateAvailable: UpdateAvailable,
    verifierRequestDeclined: VerifierRequestDeclined,
    noInfoShared: NoInfoShared,
    wallet: Wallet,
    checkInCircle: CheckInCircle,
    credentialCard: CredentialCard,
    walletBack: WalletBack,
    walletFront: WalletFront,
    credentialInHand: CredentialInHand,
    credentialList: CredentialList,
    scanShare: ScanShare,
    secureCheck: SecureCheck,
    secureImage: SecureImage,
    informationReceived: InformationReceived,
    pushNotificationImg: PushNotificationImg,
    chatLoading: ChatLoading,
    historyCardAcceptedIcon: HistoryCardAcceptedIcon,
    historyCardDeclinedIcon: HistoryCardRevokedIcon,
    historyCardExpiredIcon: HistoryCardExpiredIcon,
    historyCardRemovedIcon: HistoryCardRevokedIcon,
    historyCardRevokedIcon: HistoryCardRevokedIcon,
    historyCardUpdatesIcon: HistoryCardAcceptedIcon,
    historyPinUpdatedIcon: HistoryPinUpdatedIcon,
    historyInformationSentIcon: HistoryInformationSentIcon,
    historyInformationNotSentIcon: HistoryCardRevokedIcon,
    historyConnectionIcon: HistoryCardAcceptedIcon,
    historyConnectionRemovedIcon: HistoryCardRevokedIcon,
    historyActivateBiometryIcon: HistoryCardAcceptedIcon,
    historyDeactivateBiometryIcon: HistoryCardRevokedIcon,
    iconChevronRight: IconChevronRight,
    homeCenterImg: HomeCenterImg,
    iconDelete: IconDelete,
    iconEdit: IconEdit,
    iconCode: IconCode,
    iconError: IconError,
    iconWarning: IconWarning,
    tabOneIcon: TabOneIcon,
    tabOneFocusedIcon: TabOneFocusedIcon,
    tabTwoIcon: TabTwoIcon,
    tabThreeIcon: TabThreeIcon,
    tabThreeFocusedIcon: TabThreeFocusedIcon
  },
  img: {
    logoPrimary: {
      src: require('./assets/img/logo-large.png'),
      aspectRatio: 1,
      height: '33%',
      width: '33%',
      resizeMode: 'contain'
    },
    logoSecondary: {
      src: require('./assets/img/logo-large.png'),
      aspectRatio: 1,
      height: 120,
      width: 120,
      resizeMode: 'contain'
    }
  }
};

/**
 * Creates a theme for inline messages in inputs based on the provided text theme and assets.
 *
 * @param {{ TextTheme: ITextTheme; Assets: IAssets }} theme - The theme object containing the text theme and assets
 * @return {*} {IInlineInputMessage} - The created inline input message theme
 */
export function createInputInlineMessageTheme(theme) {
  return {
    inlineErrorText: {
      ...theme.TextTheme.inlineErrorText
    },
    InlineErrorIcon: theme.Assets.svg.iconError,
    inlineWarningText: {
      ...theme.TextTheme.inlineWarningText
    },
    InlineWarningIcon: theme.Assets.svg.iconWarning
  };
}
export const InputInlineMessage = createInputInlineMessageTheme({
  TextTheme,
  Assets
});
export const bifoldTheme = {
  themeName: 'bifold',
  Spacing,
  ColorPalette,
  TextTheme,
  InputInlineMessage,
  Inputs,
  Buttons,
  ListItems,
  TabTheme,
  NavigationTheme,
  HomeTheme,
  SettingsTheme,
  ChatTheme,
  OnboardingTheme,
  DialogTheme,
  LoadingTheme,
  PINEnterTheme,
  PINInputTheme,
  SeparatedPINInputTheme,
  CredentialCardShadowTheme,
  SelectedCredTheme,
  heavyOpacity,
  borderRadius,
  borderWidth,
  maxFontSizeMultiplier,
  Assets
};
export const themes = [bifoldTheme];

// Backwards compatible exports
//# sourceMappingURL=theme.js.map