import {BarcodeAttributeSchema} from "../../client";
import {forwardRef} from "react";
import styles from "./PrintBarcodeModal.module.css";
import {Flex, Text} from "@mantine/core";
import Barcode from "react-barcode";

type Props = {
    attributes: BarcodeAttributeSchema[]
    barcode?: string;
    quantity: number;
    additionalField?: string | null;
}
type Ref = HTMLDivElement;
const PrintBarcodeContainer = forwardRef<Ref, Props>(function PrintBarcodeContainer(props: Props, ref) {
    const {attributes, barcode, quantity, additionalField} = props;

    const MAX_ATTRIBUTES = additionalField ? 5 : 6;
    const MIN_BARCODE_SIZE = 30;
    const MAX_BARCODE_SIZE = 100;
    const STEP = (MAX_BARCODE_SIZE - MIN_BARCODE_SIZE) / MAX_ATTRIBUTES;
    const MAX_ATTRIBUTE_LENGTH = 35;

    const getBarcodeHeight = () => {
        return MIN_BARCODE_SIZE + (MAX_ATTRIBUTES - attributes.length) * STEP;
    }
    const getAttributeText = (attribute: BarcodeAttributeSchema) => {
        let result = `${attribute.name}: ${attribute.value}`;
        if (result.length > MAX_ATTRIBUTE_LENGTH) {
            result = result.slice(0, MAX_ATTRIBUTE_LENGTH - 1) + ".";
        }
        return result;
    }

    return (
        <div className={styles['print-only']} ref={ref}>
            {barcode && Array.from({length: quantity}).map((_, index) => (
                <>
                    <Flex
                        className={styles['barcode-container']}
                        key={index}
                        justify={"center"}
                        direction={"column"}
                    >
                        <Flex align={"center"} justify={"center"}>
                            <Barcode margin={0} height={getBarcodeHeight()} value={barcode}/>
                        </Flex>
                        {attributes.slice(0, MAX_ATTRIBUTES).map((attr) => (
                            <Text
                                key={attr.name}
                                className={styles['barcode-attribute-text']}
                                size={"xs"}
                            >
                                {getAttributeText(attr)}
                            </Text>
                        ))}
                        {props.additionalField && (
                            <Text
                                className={styles['barcode-attribute-text']}
                                size={"xs"}
                            >
                                {props.additionalField}
                            </Text>
                        )}
                    </Flex>
                </>
            ))}
        </div>

    )
});

export default PrintBarcodeContainer;