import React, { useContext, useState } from 'react'
import { UserCtx, UserCtxT, DogT, Axios, ResponseT, TUser } from '../context/UserContext';
import Img from './Img';
import './Qr.css';


export default function Qr() 
{
    const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
    const [dog, setDog] = useState<DogT | any>({}); // local dog not the dog in UserContext

    if(user && dog.success === undefined)
    {
        Axios.post<ResponseT>('getDog.php', 
        {
            qr_id: user.qr_id
        })
        .then((resDog) =>
        {
            setDog(resDog.data);    
        })
        .catch((err) => console.error(err));
    }

    return (
        <>
            {user && dog.data &&
            <div>
                <h1>Qr-Code Druck</h1>
                {/* <div>Logged in als:</div>
                <div>{user?.email}</div>
                <div>{user?.qr_id}</div>
                <div>{dog.data.qr_code}</div> */}

                <div className='blockRepeat'>
                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont'>{dog.data.name}</div>
                        <div className='vertFont'>{dog.data.phone}</div>
                        <div className='vertFont'>{dog.data.email}</div>
                    </div>
                </div>


                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont order2'>{dog.data.name}</div>
                        <div className='vertFont order3'>{dog.data.phone}</div>
                        <div className='vertFont order1'>{dog.data.email}</div>
                    </div>
                </div>
                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont'>{dog.data.name}</div>
                        <div className='vertFont'>{dog.data.phone}</div>
                        <div className='vertFont'>{dog.data.email}</div>
                    </div>
                </div>


                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont'>{dog.data.name}</div>
                        <div className='vertFont'>{dog.data.phone}</div>
                        <div className='vertFont'>{dog.data.email}</div>
                    </div>
                </div>
                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont'>{dog.data.name}</div>
                        <div className='vertFont'>{dog.data.phone}</div>
                        <div className='vertFont'>{dog.data.email}</div>
                    </div>
                </div>


                <div className='qrCodeBackFront'>
                    <div className='qrCode frame'>
                        <div className='qrCode__'>SCAN ME</div>
                        <Img pth={dog.data.qr_code}/>
                    </div>
                    <div className='qrCodeVert frame'>
                        <div className='vertFont'>{dog.data.name}</div>
                        <div className='vertFont'>{dog.data.phone}</div>
                        <div className='vertFont'>{dog.data.email}</div>
                    </div>
                </div>
                </div>
            </div> }
            {/* { !dog.data && user &&  
                <>
                    <h1>Qr-Code Druck</h1>
                    <div>Logged in als:</div>
                    <div>{user?.email}</div>
                    <div>{user?.qr_id}</div>
                </>
            } */}
            { !dog.data && !user &&  
                <>
                    <h1>Qr-Code Druck</h1>
                    <div>nothing</div>
                </>
            }
        </>
    )
}
