"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactI18next = require("react-i18next");
var _reactNative = require("react-native");
var _testable = require("../../../utils/testable");
var _credential = require("../../../utils/credential");
var _theme = require("../../../contexts/theme");
var _helpers = require("../../../utils/helpers");
var _reactNativeSvg = require("react-native-svg");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const paddingVertical = 10;
const paddingHorizontal = 10;
const transparent = 'rgba(0,0,0,0)';
const borderRadius = 15;
const borderPadding = 8;
const OpenIDCredentialCard = ({
  credentialDisplay,
  style = {},
  onPress = undefined
}) => {
  const {
    t
  } = (0, _reactI18next.useTranslation)();
  const {
    ColorPallet,
    TextTheme
  } = (0, _theme.useTheme)();
  const {
    display
  } = credentialDisplay;
  const {
    width
  } = (0, _reactNative.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 = _reactNative.StyleSheet.create({
    container: {
      backgroundColor: 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.default.createElement(_reactNative.View, null);
    }
    if (typeof src === 'string' && src.endsWith('.svg')) return /*#__PURE__*/_react.default.createElement(_reactNativeSvg.SvgUri, {
      role: "img",
      width: width,
      height: height,
      uri: src,
      "aria-label": logo.altText
    });
    return /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
      source: (0, _credential.toImageSource)(display.issuer.logo),
      style: {
        flex: 4,
        resizeMode: 'contain',
        width: width,
        height: height
      }
    });
  };
  const CardHeader = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: [styles.outerHeaderContainer]
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      testID: (0, _testable.testIdWithKey)('CredentialCardHeader'),
      style: [styles.innerHeaderContainer]
    }, logoContaineter(display.issuer.logo), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      numberOfLines: 1,
      ellipsizeMode: "tail",
      style: [TextTheme.label, {
        color: display.textColor ?? (0, _credential.credentialTextColor)(ColorPallet, display.backgroundColor),
        textAlignVertical: 'center'
      }],
      testID: (0, _testable.testIdWithKey)('CredentialIssuer'),
      maxFontSizeMultiplier: 1
    }, display.name)), /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      numberOfLines: 1,
      ellipsizeMode: "tail",
      style: [TextTheme.label, {
        color: display.textColor ?? (0, _credential.credentialTextColor)(ColorPallet, display.backgroundColor),
        textAlign: 'right',
        textAlignVertical: 'center'
      }],
      testID: (0, _testable.testIdWithKey)('CredentialName'),
      maxFontSizeMultiplier: 1
    }, display.description)))));
  };
  const CardBody = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: styles.bodyContainer,
      testID: (0, _testable.testIdWithKey)('CredentialCardBody')
    });
  };
  const CardFooter = () => {
    return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      testID: (0, _testable.testIdWithKey)('CredentialCardFooter'),
      style: styles.footerContainer
    }, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
      style: [TextTheme.caption, {
        color: display.textColor ?? (0, _credential.credentialTextColor)(ColorPallet, display.backgroundColor)
      }],
      testID: (0, _testable.testIdWithKey)('CredentialIssued'),
      maxFontSizeMultiplier: 1
    }, t('CredentialDetails.Issued'), ": ", (0, _helpers.formatTime)(new Date(), {
      shortMonth: true
    })));
  };
  const CredentialCard = () => {
    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(CardHeader, null), /*#__PURE__*/_react.default.createElement(CardBody, null), /*#__PURE__*/_react.default.createElement(CardFooter, null));
  };
  return /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.TouchableOpacity, {
    accessible: true,
    accessibilityLabel: `${display.issuer.name ? `${t('Credentials.IssuedBy')} ${display.issuer.name}` : ''}, ${t('Credentials.Credential')}.`,
    disabled: typeof onPress === 'undefined' ? true : false,
    onPress: onPress,
    style: [styles.container, style],
    testID: (0, _testable.testIdWithKey)('ShowCredentialDetails')
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.flexGrow, {
      overflow: 'hidden'
    }],
    testID: (0, _testable.testIdWithKey)('CredentialCard')
  }, display.backgroundImage ? /*#__PURE__*/_react.default.createElement(_reactNative.ImageBackground, {
    source: (0, _credential.toImageSource)(display.backgroundImage),
    style: styles.flexGrow,
    imageStyle: {
      borderRadius
    }
  }, /*#__PURE__*/_react.default.createElement(CredentialCard, null)) : /*#__PURE__*/_react.default.createElement(CredentialCard, null)));
};
var _default = exports.default = OpenIDCredentialCard;
//# sourceMappingURL=OpenIDCredentialCard.js.map