import { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import bwipjs from 'bwip-js';
import QRCode from 'qrcode.react';
import React from 'react';
import useAuthUser from 'react-auth-kit/hooks/useAuthUser';
function LeumasIdRender({ id }) {
    const [showFront, setShowFront] = useState(true);
    const barcodeCanvasRef = useRef(null);
    const auth = useAuthUser();
    const leumasLogo  = "https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg"
    // console.log("ID : " , id , auth())
    useEffect(() => {
        if (id?.barcode) {
            try {
                bwipjs.toCanvas(barcodeCanvasRef.current, {
                    bcid: 'code128',
                    text: id.barcode,
                    scale: 1,
                    height: 10,
                });
            } catch (err) {
                console.error('Error generating barcode:', err);
            }
        }
    }, [id]);

    console.log(auth)
    console.log("ID " , id)

    const toggleFlip = () => {
        setShowFront(!showFront);
    };

    const renderFront = () => (
        <div className="border-2 rounded-lg p-1 min-h-[100px] max-h-[150px] max-w-[300px] flex bg-gray-200 relative">
        {/* Logo as background with white overlay */}
        <div className="absolute inset-0 bg-white bg-opacity-50 flex justify-end items-center">
            <img src={leumasLogo} alt="Leumas Logo" className="h-[75px] w-[75px] opacity-75 object-cover" />
        </div>
        <div className='w-1/3 z-10 '>
            {/* <p className='text-[8px] font-bold float-right px-1 text-electric-blue'>LEUMAS ID</p> */}
            <img src={id?.owner?.profileImage ? id?.owner?.profileImage : auth?.profilePicture} className=''/>

        </div>

        <div className='w-2/3 flex flex-col justify-between z-10'>

            <div>
            <span className={`${spanStyle}`}>
    <p className={`${smallRedText}`}>?Name:</p>
    <p className={`${boldBlueText} `}>{id?.firstName} {id?.lastName}</p>
</span>

<span className={`${spanStyle}`}>
    <p className={`${smallRedText}`}>DOB:</p>
    <p className={`${boldBlueText}`}>
        {id?.dateOfBirth ? new Date(id.dateOfBirth).toLocaleDateString('en-US', { timeZone: 'UTC' }) : 'N/A'}
    </p>
</span>

            <span className={`${spanStyle}`}><p className={`${smallRedText} hover:text-underline`}>Wallet:</p><p className={`${boldBlueText} `}>{id?.metaMaskOwnerWallet?.substring(0,12)}...</p></span>


            <p className={`${BlackBold} flex items-center justify-between w-full`}>Sig : {id?.serialCode?.substring(0,8)}</p>

            </div>

            <canvas ref={barcodeCanvasRef} className='px-2' style={{ height: '20px', width: '100%' }}></canvas>
        </div>
    </div>
    );

    const renderBack = () => (
        <div className="border-2 rounded-lg p-1 min-h-[100px] max-h-[150px] max-w-[300px] flex bg-gray-200 relative flex items-center justify-center">
            <div className='flex flex-col items-center max-h-full'>
                {/* QR Code */}
                <QRCode className='max-w-[50px] max-h-[50px]'  value={id?.PoplLink || "https://popl.co"} size={100} />
                
            </div>
        </div>
    );
    // Styles
    const smallRedText = "text-[5px] px-1 text-red-400";
    const boldBlueText = "text-[6px] text-blue-800 font-bold bg-opacity-30 font-bold ";
    const spanStyle = "flex gap-1 items-center justify-between";
    const BlackBold = "text-black font-bold px-1 text-[7px]";

  return (
        <div className={`leumas-id-container pb-10 ${showFront ? '' : 'flipped'}`} onClick={toggleFlip}>
            <div className="leumas-id-card">
                <div className="card-front">
                    {renderFront()}
                </div>
                <div className="card-back">
                    {renderBack()}
                </div>
            </div>
        </div>
    );
}

LeumasIdRender.propTypes = {
    id: PropTypes.object.isRequired,
};

export default LeumasIdRender;