// import React, { ChangeEvent, MouseEventHandler, useContext, useState } from 'react'
// import { Link } from 'react-router-dom';
// import { UserCtx, UserCtxT, DogT, ResponseT, TUser } from '../context/UserContext';
// import {Axios, updateQR} from '../services/PhpApi';
// import Checkbox from './Checkbox';
// import Img from './Img';
// import './Qr.css';

// type ListItemT = 
// {
//     name: string;
//     ordernum: number;
// }

export default function Qr() 
{
//     const { user } = useContext<UserCtxT | null>(UserCtx) as UserCtxT;
//     const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext
//     const [width, setWidth] = useState(2.4);
//     const [height, setHeight] = useState(3.7);
//     const [fontSize, setFontSize] = useState(100);
//     const [visibleItem, setVisibleItem] = useState(0b111); // 100 name, 10 phone, 1 email
//     const [itemOrder, setItemOrder] = useState(123); //  name first, phone second, email third
//     const [errMsg, setErrMsg] = useState("false");
//     const [successMsg, setSuccessMsg] = useState("false");
//     const [itemList, setItemList] = useState([
//                                                 {id: '0', name:'Name', ordernum: 1},
//                                                 {id: '1', name:'Telefon', ordernum: 2},
//                                                 {id: '2', name:'Email', ordernum: 3}
//                                              ]);
                                             
//     //save reference for dragItem and dragOverItem
//     const dragItem = React.useRef<any>(null);
//     const dragOverItem = React.useRef<any>(null);

//     // const incrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>
//     // {
//     //     event.preventDefault();
//     //     if(fontSize < 200)
//     //     {
//     //         setFontSize(fontSize + 1);
//     //     }

//     //     console.log("\nincrementFontSize " + fontSize);
//     //     return;
//     // });

//     // const decrementFontSize = ((event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined =>  
//     // {
//     //     event.preventDefault();
//     //     if(fontSize > 1)
//     //     {
//     //         setFontSize(fontSize -1);
//     //     }
//     //     console.log("\ndecrementFontSize " + fontSize);
//     //     return;
//     // });

//     function setBitField(val: number, checked: boolean, bit: number) : number
//     {
//         if(checked)
//         {
//             val |= bit;
//         }
//         else
//         {
//             val ^= bit;
//         }
//         return val;
//     }

//     function checkBoxChange(id: string, checked: boolean) : void
//     {
//         let value = visibleItem;
//         if(id==="name")
//         {
//             value = setBitField(value, checked, 0b100);
//         }
//         if(id==="phone")
//         {
//             value = setBitField(value, checked, 0b010);
//         }
//         if(id==="email")
//         {
//             value = setBitField(value, checked, 0b001);
//         }
//         setVisibleItem(value);
//     }

//     function getItemOrderNumber(digit: number)
//     {
//         let ordernum = itemOrder; // 123
//         ordernum = ordernum % (digit*10); // 123
//         ordernum = Math.trunc(ordernum / digit);

//         return ordernum;
//     }

//     function getItemOrderNumber_(order: number, digit: number)
//     {
//         let ordernum = order; // 123
//         ordernum = ordernum % (digit*10); // 123
//         ordernum = Math.trunc(ordernum / digit);

//         return ordernum;
//     }

// 	//const handle drag sorting
// 	function handleSort()
//     {
// //        console.log('handleSort current:' + dragItem.current);
// 		//duplicate items
// 		let _itemList = [...itemList];

// 		//remove and save the dragged item content
// 		const draggedItemContent = _itemList.splice(dragItem.current, 1)[0];

// 		//switch the position
// 		_itemList.splice(dragOverItem.current, 0, draggedItemContent);

// 		//reset the position ref
// 		dragItem.current = null;
// 		dragOverItem.current = null;

// 		//update the actual array
// 		setItemList(_itemList);

//         // set new itemorder
//         let newItemOrder = 0;
//         let digit = 100;

// // name         1
// // telefon      2
// // email        3 

// // email  
// // name   
// // telefon

// // email is first  1 -> 3
// // name  is second 2 -> 1
// // telefon third   3 -> 2

// // 231

// //        console.log('handleSort itemList:');
// //        console.log(_itemList);

//         _itemList.map((item, index) => 
//         {
//             digit = 10**(3-item.ordernum);
//             newItemOrder += (index+1) * digit;
//         });
//         setItemOrder(newItemOrder);
// //        console.log('handleSort newItemOrder:' + newItemOrder);
// 	}
    
//     function oneQrBlock()
//     {
//         return(
//     <div className='qrCodeBackFront'>
//         <div className='qrCode frame' style={{height : height + 'cm', width : width + 'cm'}}>
//             <div className='qrCode__'>SCAN ME</div>
//             <Img pth={dog.data.qr_code} className='qrCodeImg'/>
//         </div>
//         <div className='qrCode vert frame' style={{ height : height + 'cm', width : width + 'cm', fontSize: fontSize + '%' }}>
//             {((visibleItem & 0b100) > 0) && <div className={`vertFont order${getItemOrderNumber(100)}`}>{dog.data.name}</div>}
//             {((visibleItem & 0b010) > 0) && <div className={`vertFont order${getItemOrderNumber(10)}`}>{dog.data.phone}</div>}
//             {((visibleItem & 0b001) > 0) && <div className={`vertFont order${getItemOrderNumber(1)}`}>{dog.data.email}</div>}
//         </div>
//     </div>);
//     }

//     const saveHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => 
//     {
//         event.preventDefault();
//         console.log("saveHandler \n");
//         console.log(event);
//         updateQR(
//             { 
//                 qr_width_cm: width, 
//                 qr_height_cm: height, 
//                 qr_fontsize: fontSize, 
//                 qr_visible_items: visibleItem, 
//                 qr_item_sequence: itemOrder
//             }
//         ).then((resQR) =>
//         {
//             if(resQR.success)
//             {
//                 setSuccessMsg('Daten gesichert!');
//                 setErrMsg("false");
//             }
//             else if(!resQR.success && resQR.message)
//             {
//                 setSuccessMsg("false");
//                 setErrMsg(resQR.message);
//             }
//         })
//         .catch((err) => console.error(err));
//         return;
//     }

//     const printHandler = (event: React.MouseEvent<HTMLButtonElement>): MouseEventHandler<HTMLButtonElement> | undefined => 
//     {
//         event.preventDefault();
//         console.log("printHandler \n");
//         console.log(event);
//         window.print();
//         return;
//     }

//     function OrderItemList(order: number)
//     {
// 		let _itemList: {id: string; name: string; ordernum: number}[] = [];
//         let oNum = getItemOrderNumber_(order, 100);
//         let item = itemList.find( x => x.ordernum === oNum);
//         _itemList.push(item!);
//         oNum = getItemOrderNumber_(order, 10);
//         item = itemList.find( x => x.ordernum === oNum);
//         _itemList.push(item!);
//         oNum = getItemOrderNumber_(order, 1);
//         item = itemList.find( x => x.ordernum === oNum);
//         _itemList.push(item!);
//         setItemList(_itemList);
//     }
//     const onChangeWidth = (e: ChangeEvent<HTMLInputElement> ) => 
//     {
//         setWidth(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
//     }

//     const onChangeHeight = (e: ChangeEvent<HTMLInputElement> ) => 
//     {
//         setHeight(parseInt(e.target.value)/10 ? parseInt(e.target.value)/10 : 0);
//     }

//     const onChangeFontSize = (e: ChangeEvent<HTMLInputElement> ) => 
//     {
//         setFontSize(parseInt(e.target.value) ? parseInt(e.target.value) : 0);
//     }

//     if(user && dog.success === undefined)
//     {
//         Axios.post<ResponseT>('getDog.php', 
//         {
//             qr_id: user.qr_id
//         })
//         .then((resDog) =>
//         {
//             let locDog: DogT = resDog.data.data;
//             setDog(resDog.data); // ResponseT
//             setWidth(locDog.qr_width_cm);
//             setHeight(locDog.qr_height_cm);
//             setFontSize(locDog.qr_fontsize);
//             setVisibleItem(locDog.qr_visible_items);
//             setItemOrder(locDog.qr_item_sequence);
//             OrderItemList(locDog.qr_item_sequence);
//         })
//         .catch((err) => console.error(err));
//     }

     return (
         <>
             {/* {user && dog.data &&
             <div>
                 <h1>Qr-Code Druck</h1>
                 <Link to={"/profil"}>Zurück zum Profil</Link>
                 <div className='qrSettings____'>
                 <div className='qrSettings'>
                     <div>
                         <div>Anhänger</div>
                         <label htmlFor='width'>Breite [mm] </label>
                         <input className='qr-input' type='number' id='width' name='width' 
                         min="1" max="100"
                         onChange={onChangeWidth} value={width*10}/>
                         <label htmlFor='height'>Höhe [mm] </label>
                         <input className='qr-input' type='number' id='height' name='height' 
                         min="1" max="100"
                         onChange={onChangeHeight} value={height*10}/>
                     </div>
                     <div>
                         <label htmlFor='fontSize'>Schriftgröße </label>
                         <input className='qr-input' type='number' id='fontSize' name='fontSize' 
                         min="1" max="200"
                         onChange={onChangeFontSize} value={fontSize} />
                     </div>
                     <div>
                     <div>Sichtbare Elemente</div>
                         <Checkbox 
                             id='name' 
                             label={'Name'} 
                             checked={(visibleItem & 0b100) > 0} 
                             changeEvent={checkBoxChange}
                             />
                         <Checkbox 
                             id='phone' 
                             label={'Telefon'} 
                             checked={(visibleItem & 0b010) > 0} 
                             changeEvent={checkBoxChange}
                             />
                         <Checkbox 
                             id='email' 
                             label={'Email'} 
                             checked={(visibleItem & 0b001) > 0} 
                             changeEvent={checkBoxChange}
                             />
                     </div>
                     <div>
                         <div>Reihenfolge</div>
                         <div className='beschreibung'>Ändern durch Drag'n Drop</div>
                         <div className="list-container">
                         {itemList.map((item, index) => (
                             <div
                                 key={index}
                                 className="list-item"
                                 draggable
                                 onDragStart={(e) => {dragItem.current = index; }}
                                 onDragEnter={(e) => {dragOverItem.current = index; }}
                                 onDragEnd={handleSort}
                                 onDragOver={(e) => {e.preventDefault(); }}
                             >
                                 <li>{item.name}</li>
                             </div>
                         ))}
                         </div>
                     </div>
                 </div>
                 <div className='column'>
                 <button id="saveButton" className='saveButton' onClick={saveHandler} >Werte sichern</button>
                 <button id="printButton" className='printButton' onClick={printHandler} >QR-Code drucken</button>
                 {successMsg !== "false" && <div className="success-msg">{successMsg}</div>}
                 {errMsg !== "false" && <div className="err-msg">{errMsg}</div>}
                 </div>
                 </div>
                 <div className='blockRepeat'>
                 {oneQrBlock()}
                 {oneQrBlock()}
                 {oneQrBlock()}
                 {oneQrBlock()}
                 {oneQrBlock()}
                 {oneQrBlock()}
                 </div>
             </div> }
             { !dog.data && !user &&  
                 <>
                     <h1>Qr-Code Druck</h1>
                     <div>nothing</div>
                 </>
             } */}
         </>
     );
}
