import InstagramChanel from '@/../public/instagram.png';
import Logo from '@/../public/logo.jpeg';
import TelegramChanel from '@/../public/telegram.jpg';
import { Box, Typography } from '@mui/material';
import Image from 'next/image';
import { forwardRef } from 'react';

interface BoxesPrintProps {
    boxData?: {
        id: number;
        box_name: string;
        net_weight: number;
        box_weight: number;
        box_type: string;
        box_size: string;
        passportName: string;
        status: string;
        packetId: number;
        partyId: number;
        partyName: string;
        passportId: string;
        client_id: string;
        clientName: string;
        products_list: Array<{
            id: number;
            price: number;
            cargoId: string;
            trekId: string;
            name: string;
            nameRu: string;
            amount: number;
            acceptedNumber: number;
            weight: number;
        }>;
    };
    key: number | string;
}

const BoxesPrint = forwardRef<HTMLDivElement, BoxesPrintProps>(({ boxData, key }, ref) => {
    return (
        <Box
            ref={ref}
            sx={{
                display: 'flex',
                flexDirection: 'column',
                width: '100mm',
                height: '100mm',
                margin: '0 auto',
                fontSize: '9px',
                '@media print': {
                    width: '100mm',
                    height: '100mm',
                },
            }}
            key={key}
        >
            <Box sx={{ border: '2px solid black', borderBottom: 'none' }}>
                <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
                    <Box
                        sx={{
                            color: '#fff',
                            padding: '4px',
                            display: 'flex',
                            // flexDirection: 'column',
                            gap: '12px',
                        }}
                    >
                        <Image alt='logo' src={Logo} width={55} height={55} priority unoptimized />
                        <Box
                            sx={{
                                color: '#fff',
                                display: 'flex',
                                flexDirection: 'column',
                                gap: '4px',
                            }}
                        >
                            <Typography sx={{ color: 'black', fontSize: '10px' }}>CPOST EXPRESS CARGO</Typography>
                            <Typography sx={{ color: 'black', fontSize: '10px' }}>
                                Reys: {boxData?.partyName}-{boxData?.client_id}
                            </Typography>
                            <Typography sx={{ color: 'black', fontSize: '10px' }}>TEL: +(998) 90 113 44 77</Typography>
                        </Box>
                    </Box>
                    <Box sx={{ display: 'flex', gap: '10px', marginTop: '5px', marginRight: '5px' }}>
                        <Image alt='telegram' src={TelegramChanel} width={50} height={50} priority unoptimized />
                        <Image alt='instagram' src={InstagramChanel} width={50} height={50} priority unoptimized />
                    </Box>
                </Box>
            </Box>
            <Box
                sx={{
                    border: '1px solid black',
                    borderTop: '1px solid black',
                    textAlign: 'start',
                    width: 'auto',
                    display: 'grid',
                    gridTemplateColumns: 'repeat(3, 1fr)',
                    '@media print': {
                        pageBreakInside: 'avoid',
                    },
                }}
            >
                {boxData?.products_list.map((list, index) => (
                    <Box
                        sx={{
                            border: '1px solid black',
                            textAlign: 'start',
                            width: 'auto',
                            padding: '4px',
                        }}
                        key={index}
                    >
                        <Typography sx={{ fontSize: '12px' }}>{list.trekId}</Typography>
                    </Box>
                ))}
            </Box>
        </Box>
    );
});

BoxesPrint.displayName = 'BoxesPrint';

export default BoxesPrint;