import { StyleSheet, useWindowDimensions, View } from 'react-native';
import { BrandingOverlayType } from '@hyperledger/aries-oca/build/legacy';
import CardWatermark from '../misc/CardWatermark';
import { useTheme } from '../../contexts/theme';
import { credentialTextColor } from '../../utils/credential';
import { testIdWithKey } from '../../utils/testable';
import { useTranslation } from 'react-i18next';
import { formatTime } from '../../utils/helpers';
import { ThemedText } from '../texts/ThemedText';
const paddingHorizontal = 24;
const paddingVertical = 16;
const logoHeight = 80;
const CredentialDetailPrimaryHeader = ({
  overlay,
  brandingOverlayType = BrandingOverlayType.Branding10,
  credential
}) => {
  var _overlay$brandingOver, _overlay$metaOverlay, _overlay$metaOverlay2, _overlay$metaOverlay3, _overlay$metaOverlay4, _overlay$metaOverlay5, _overlay$metaOverlay6;
  const {
    t
  } = useTranslation();
  const {
    ColorPallet
  } = useTheme();
  const {
    width,
    height
  } = useWindowDimensions();
  const styles = StyleSheet.create({
    primaryHeaderContainer: {
      paddingHorizontal,
      paddingVertical,
      overflow: 'hidden'
    },
    textContainer: {
      color: brandingOverlayType === BrandingOverlayType.Branding10 ? credentialTextColor(ColorPallet, (_overlay$brandingOver = overlay.brandingOverlay) === null || _overlay$brandingOver === void 0 ? void 0 : _overlay$brandingOver.primaryBackgroundColor) : ColorPallet.brand.primary
    }
  });
  return /*#__PURE__*/React.createElement(View, {
    testID: testIdWithKey('CredentialDetailsPrimaryHeader'),
    style: [styles.primaryHeaderContainer, {
      zIndex: -1
    }]
  }, /*#__PURE__*/React.createElement(View, null, ((_overlay$metaOverlay = overlay.metaOverlay) === null || _overlay$metaOverlay === void 0 ? void 0 : _overlay$metaOverlay.watermark) && brandingOverlayType === BrandingOverlayType.Branding10 && /*#__PURE__*/React.createElement(CardWatermark, {
    width: width,
    height: height,
    watermark: (_overlay$metaOverlay2 = overlay.metaOverlay) === null || _overlay$metaOverlay2 === void 0 ? void 0 : _overlay$metaOverlay2.watermark
  }), brandingOverlayType === BrandingOverlayType.Branding10 && /*#__PURE__*/React.createElement(ThemedText, {
    accessibilityLabel: `${t('Credentials.IssuedBy')} ${(_overlay$metaOverlay3 = overlay.metaOverlay) === null || _overlay$metaOverlay3 === void 0 ? void 0 : _overlay$metaOverlay3.issuer}`,
    testID: testIdWithKey('CredentialIssuer'),
    variant: "label",
    style: [styles.textContainer, {
      paddingLeft: logoHeight + paddingVertical,
      paddingBottom: paddingVertical,
      lineHeight: 19,
      opacity: 0.8
    }],
    numberOfLines: 1
  }, (_overlay$metaOverlay4 = overlay.metaOverlay) === null || _overlay$metaOverlay4 === void 0 ? void 0 : _overlay$metaOverlay4.issuer), /*#__PURE__*/React.createElement(ThemedText, {
    accessibilityLabel: `${(_overlay$metaOverlay5 = overlay.metaOverlay) === null || _overlay$metaOverlay5 === void 0 ? void 0 : _overlay$metaOverlay5.name} ${t('Credentials.Credential')}`,
    testID: testIdWithKey('CredentialName'),
    style: [styles.textContainer, {
      lineHeight: 24
    }]
  }, (_overlay$metaOverlay6 = overlay.metaOverlay) === null || _overlay$metaOverlay6 === void 0 ? void 0 : _overlay$metaOverlay6.name), brandingOverlayType === BrandingOverlayType.Branding11 && credential && /*#__PURE__*/React.createElement(ThemedText, {
    testID: testIdWithKey('IssuedOn'),
    style: [styles.textContainer, {
      lineHeight: 24,
      marginTop: 8,
      fontSize: 14,
      color: ColorPallet.grayscale.mediumGrey
    }]
  }, t('CredentialDetails.IssuedOn'), " ", formatTime(credential.createdAt, {
    includeHour: true
  }))));
};
export default CredentialDetailPrimaryHeader;
//# sourceMappingURL=CredentialDetailPrimaryHeader.js.map