import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { DeviceEventEmitter, Image, ImageBackground, StyleSheet, Text, useWindowDimensions, View, TouchableOpacity } from 'react-native';
import { testIdWithKey } from '../../../utils/testable';
import { credentialTextColor, toImageSource } from '../../../utils/credential';
import { useTheme } from '../../../contexts/theme';
import { formatTime } from '../../../utils/helpers';
import { SvgUri } from 'react-native-svg';
import { getCredentialForDisplay } from '../display';
import { BifoldError } from '../../../types/error';
import { EventTypes } from '../../../constants';
const paddingVertical = 10;
const paddingHorizontal = 10;
const transparent = 'rgba(0,0,0,0)';
const borderRadius = 15;
const borderPadding = 8;
const OpenIDCredentialCard = ({
  credentialDisplay,
  credentialRecord,
  style = {},
  onPress = undefined
}) => {
  const {
    t
  } = useTranslation();
  const {
    ColorPallet,
    TextTheme
  } = useTheme();
  const display = useMemo(() => {
    if (credentialDisplay) return credentialDisplay;
    if (!credentialRecord) {
      const error = new BifoldError(t('Error.Title1047'), t('Error.Message1047'), 'Error[Logical] credentialDisplay and credentialRecord are undefined', 1047);
      DeviceEventEmitter.emit(EventTypes.ERROR_ADDED, error);
      return;
    }
    const result = getCredentialForDisplay(credentialRecord);
    return result.display;
  }, [credentialDisplay, credentialRecord, t]);
  const {
    width
  } = useWindowDimensions();
  const cardHeight = width / 2; // a card height is half of the screen width
  const cardHeaderHeight = cardHeight / 4; // a card has a total of 4 rows, and the header occupy 1 row

  const styles = StyleSheet.create({
    container: {
      backgroundColor: display !== null && display !== void 0 && display.backgroundColor ? display.backgroundColor : transparent,
      height: cardHeight,
      borderRadius: borderRadius
    },
    outerHeaderContainer: {
      flexDirection: 'column',
      backgroundColor: transparent,
      height: cardHeaderHeight + borderPadding,
      borderTopLeftRadius: borderRadius,
      borderTopRightRadius: borderRadius
    },
    innerHeaderContainer: {
      flexDirection: 'row',
      height: cardHeaderHeight,
      marginLeft: borderPadding,
      marginRight: borderPadding,
      marginTop: borderPadding,
      marginBottom: borderPadding,
      backgroundColor: transparent
    },
    bodyContainer: {
      flexGrow: 1
    },
    footerContainer: {
      flexDirection: 'row',
      backgroundColor: transparent,
      paddingHorizontal,
      paddingVertical,
      borderBottomLeftRadius: borderRadius,
      borderBottomRightRadius: borderRadius
    },
    revokedFooter: {
      backgroundColor: ColorPallet.notification.error,
      flexGrow: 1,
      marginHorizontal: -1 * paddingHorizontal,
      marginVertical: -1 * paddingVertical,
      paddingHorizontal: paddingHorizontal,
      paddingVertical: paddingVertical,
      borderBottomLeftRadius: borderRadius,
      borderBottomRightRadius: borderRadius
    },
    flexGrow: {
      flexGrow: 1
    },
    watermark: {
      opacity: 0.16,
      fontSize: 22,
      transform: [{
        rotate: '-30deg'
      }]
    }
  });
  const logoContaineter = logo => {
    const width = 64;
    const height = 48;
    const src = logo === null || logo === void 0 ? void 0 : logo.url;
    if (!src) {
      return /*#__PURE__*/React.createElement(View, null);
    }
    if (typeof src === 'string' && src.endsWith('.svg')) return /*#__PURE__*/React.createElement(SvgUri, {
      role: "img",
      width: width,
      height: height,
      uri: src,
      "aria-label": logo.altText
    });
    return /*#__PURE__*/React.createElement(Image, {
      source: toImageSource(display === null || display === void 0 ? void 0 : display.issuer.logo),
      style: {
        flex: 4,
        resizeMode: 'contain',
        width: width,
        height: height
      }
    });
  };
  const CardHeader = () => {
    return /*#__PURE__*/React.createElement(View, {
      style: [styles.outerHeaderContainer]
    }, /*#__PURE__*/React.createElement(View, {
      testID: testIdWithKey('CredentialCardHeader'),
      style: [styles.innerHeaderContainer]
    }, logoContaineter(display === null || display === void 0 ? void 0 : display.issuer.logo), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      numberOfLines: 1,
      ellipsizeMode: "tail",
      style: [TextTheme.label, {
        color: (display === null || display === void 0 ? void 0 : display.textColor) ?? credentialTextColor(ColorPallet, display === null || display === void 0 ? void 0 : display.backgroundColor),
        textAlignVertical: 'center'
      }],
      testID: testIdWithKey('CredentialIssuer'),
      maxFontSizeMultiplier: 1
    }, display === null || display === void 0 ? void 0 : display.name)), /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
      numberOfLines: 1,
      ellipsizeMode: "tail",
      style: [TextTheme.label, {
        color: (display === null || display === void 0 ? void 0 : display.textColor) ?? credentialTextColor(ColorPallet, display === null || display === void 0 ? void 0 : display.backgroundColor),
        textAlign: 'right',
        textAlignVertical: 'center'
      }],
      testID: testIdWithKey('CredentialName'),
      maxFontSizeMultiplier: 1
    }, display === null || display === void 0 ? void 0 : display.description)))));
  };
  const CardBody = () => {
    return /*#__PURE__*/React.createElement(View, {
      style: styles.bodyContainer,
      testID: testIdWithKey('CredentialCardBody')
    });
  };
  const CardFooter = () => {
    return /*#__PURE__*/React.createElement(View, {
      testID: testIdWithKey('CredentialCardFooter'),
      style: styles.footerContainer
    }, /*#__PURE__*/React.createElement(Text, {
      style: [TextTheme.caption, {
        color: (display === null || display === void 0 ? void 0 : display.textColor) ?? credentialTextColor(ColorPallet, display === null || display === void 0 ? void 0 : display.backgroundColor)
      }],
      testID: testIdWithKey('CredentialIssued'),
      maxFontSizeMultiplier: 1
    }, t('CredentialDetails.Issued'), ": ", formatTime(new Date(), {
      shortMonth: true
    })));
  };
  const CredentialCard = () => {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CardHeader, null), /*#__PURE__*/React.createElement(CardBody, null), /*#__PURE__*/React.createElement(CardFooter, null));
  };
  return /*#__PURE__*/React.createElement(TouchableOpacity, {
    accessible: true,
    accessibilityLabel: `${display !== null && display !== void 0 && display.issuer.name ? `${t('Credentials.IssuedBy')} ${display === null || display === void 0 ? void 0 : display.issuer.name}` : ''}, ${t('Credentials.Credential')}.`,
    accessibilityRole: "button",
    disabled: typeof onPress === 'undefined' ? true : false,
    onPress: onPress,
    style: [styles.container, style],
    testID: testIdWithKey('ShowCredentialDetails')
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.flexGrow, {
      overflow: 'hidden'
    }],
    testID: testIdWithKey('CredentialCard')
  }, display !== null && display !== void 0 && display.backgroundImage ? /*#__PURE__*/React.createElement(ImageBackground, {
    source: toImageSource(display.backgroundImage),
    style: styles.flexGrow,
    imageStyle: {
      borderRadius
    }
  }, /*#__PURE__*/React.createElement(CredentialCard, null)) : /*#__PURE__*/React.createElement(CredentialCard, null)));
};
export default OpenIDCredentialCard;
//# sourceMappingURL=OpenIDCredentialCard.js.map