import React from 'react';
import { Document, Image, StyleSheet, View } from '@react-pdf/renderer';
import { getDob, getSex } from '../patientAccessors';
import JsBarcode from 'jsbarcode';
import { withLanguageContext } from '../pdf/languageContext';
import { useDateTime, withDateTimeContext } from '../pdf/withDateTimeContext';
import { Page } from '../pdf/Page';
import { Text } from '../pdf/Text';
const CustomBarcode = ({ id, width, height })=>{
    // eslint-disable-next-line no-undef
    const canvas = document.createElement('canvas');
    JsBarcode(canvas, id, {
        width: 1,
        margin: 0,
        displayValue: false
    });
    const barcode = canvas.toDataURL();
    return /*#__PURE__*/ React.createElement(Image, {
        source: barcode,
        style: {
            height,
            maxWidth: width,
            objectFit: 'cover'
        }
    });
};
const mmToPt = (mm)=>mm * 2.835;
const styles = StyleSheet.create({
    mainContainer: {
        display: 'flex',
        flexDirection: 'row',
        height: '28.6mm',
        overflow: 'hidden'
    },
    photoContainer: {
        width: '1in',
        paddingHorizontal: '2mm',
        paddingTop: '1mm'
    },
    photoFrame: {
        width: '1in',
        height: '1.3in'
    },
    photo: {
        width: '100%',
        height: '100%',
        objectFit: 'cover'
    },
    details: {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        marginLeft: '5mm'
    },
    infoRow: {
        display: 'flex',
        flexDirection: 'row',
        fontSize: '2.4mm',
        marginVertical: 1.8
    },
    detailsKey: {
        width: '18mm',
        fontWeight: 700
    },
    detailsValue: {
        maxWidth: '35mm',
        overflow: 'hidden',
        fontWeight: 700
    },
    barcodeRow: {
        height: '6.3mm',
        marginLeft: '29.4mm'
    }
});
const MainContainer = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.mainContainer,
        ...props
    });
const PhotoContainer = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.photoContainer,
        ...props
    });
const PhotoFrame = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.photoFrame,
        ...props
    });
const Details = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.details,
        ...props
    });
const InfoRow = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.infoRow,
        ...props
    });
const DetailsKey = (props)=>/*#__PURE__*/ React.createElement(Text, {
        bold: true,
        style: styles.detailsKey,
        ...props
    });
const DetailsValue = (props)=>/*#__PURE__*/ React.createElement(Text, {
        bold: true,
        style: styles.detailsValue,
        ...props
    });
const BarcodeRow = (props)=>/*#__PURE__*/ React.createElement(View, {
        style: styles.barcodeRow,
        ...props
    });
const DetailsRow = ({ value, label })=>/*#__PURE__*/ React.createElement(InfoRow, null, /*#__PURE__*/ React.createElement(DetailsKey, null, `${label}: `), /*#__PURE__*/ React.createElement(DetailsValue, null, value));
const PatientPhoto = ({ patientImageData })=>{
    return /*#__PURE__*/ React.createElement(PhotoContainer, null, /*#__PURE__*/ React.createElement(PhotoFrame, null, /*#__PURE__*/ React.createElement(Image, {
        src: `data:image/jpeg;base64,${patientImageData}`,
        style: styles.photo
    })));
};
const IDCardPrintoutComponent = ({ patient, patientImageData, cardDimensions, measures, getTranslation })=>{
    const { formatShort } = useDateTime();
    const pageStyles = StyleSheet.create({
        card: {
            width: cardDimensions.width,
            height: cardDimensions.height,
            marginTop: mmToPt(measures.cardMarginTop),
            marginLeft: mmToPt(measures.cardMarginLeft),
            display: 'flex',
            flexDirection: 'column'
        }
    });
    const Card = (props)=>/*#__PURE__*/ React.createElement(View, {
            style: pageStyles.card,
            ...props
        });
    return /*#__PURE__*/ React.createElement(Document, null, /*#__PURE__*/ React.createElement(Page, {
        size: "A4",
        style: {
            paddingTop: mmToPt(10.6)
        }
    }, /*#__PURE__*/ React.createElement(Card, null, /*#__PURE__*/ React.createElement(MainContainer, null, /*#__PURE__*/ React.createElement(PatientPhoto, {
        patientImageData: patientImageData
    }), /*#__PURE__*/ React.createElement(Details, null, /*#__PURE__*/ React.createElement(DetailsRow, {
        value: patient.displayId,
        label: getTranslation('general.localisedField.displayId.label.short', 'NHN')
    }), /*#__PURE__*/ React.createElement(DetailsRow, {
        value: patient.lastName,
        label: getTranslation('general.localisedField.lastName.label', 'Last name')
    }), /*#__PURE__*/ React.createElement(DetailsRow, {
        value: patient.firstName,
        label: getTranslation('general.localisedField.firstName.label', 'First name')
    }), /*#__PURE__*/ React.createElement(DetailsRow, {
        value: getDob(patient, {
            getTranslation,
            formatShort
        }),
        label: getTranslation('general.localisedField.dateOfBirth.label.short', 'DOB')
    }), /*#__PURE__*/ React.createElement(DetailsRow, {
        value: getSex(patient),
        label: getTranslation('general.localisedField.sex.label', 'Sex')
    }))), /*#__PURE__*/ React.createElement(BarcodeRow, null, /*#__PURE__*/ React.createElement(CustomBarcode, {
        height: "5.9mm",
        width: "33mm",
        id: patient.displayId
    })))));
};
export const IDCardPrintout = withLanguageContext(withDateTimeContext(IDCardPrintoutComponent));

//# sourceMappingURL=IDCardPrintout.js.map