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: '1px solid black' }}>
                <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={30} height={30} 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}</Typography>
                            <Typography sx={{ color: 'black', fontSize: '10px' }}>{boxData?.client_id}</Typography>
                        </Box>
                    </Box>
                    <Box sx={{ display: 'flex', gap: '4px', marginTop: '5px', marginRight: '5px' }}>
                        <Image alt='telegram' src={TelegramChanel} width={15} height={15} priority unoptimized />
                        <Image alt='instagram' src={InstagramChanel} width={15} height={15} priority unoptimized />
                        <Typography sx={{ color: 'black', fontSize: '8px' }}>TEL: +(998) 90 113 44 77</Typography>
                    </Box>
                </Box>
                <Box
                    sx={{
                        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={{
                                borderRight: '1px solid black',
                                textAlign: 'start',
                                width: 'auto',
                                padding: '4px',
                            }}
                        >
                            <Typography sx={{ fontSize: '12px' }}>{list.trekId}</Typography>
                        </Box>
                    ))}
                </Box>
            </Box>
        </Box>
    );
});

BoxesPrint.displayName = 'BoxesPrint';

export default BoxesPrint;
