import { UserCtx, UserCtxT } from '../context/UserContext';
import { useContext, ReactNode } from 'react'
import { useParams } from "react-router-dom";
import Img from './Img';
import DogNameTxt from './DogNameTxt';
import './Dog.css';

const Dog = () => 
{
  const {getDog, dog} = useContext<UserCtxT | null>(UserCtx) as UserCtxT;

  // m7MdMK
  const params = useParams();
  const qr_id = Object.values(params)[0];
  var needData = dog.success === undefined;
  if(needData)
  {
    getDog(qr_id); // await not allowed?! => workaraound
  }
  var email = "nicht definiert;"
  var phone = "nicht definiert;"
  var picPath = "nicht definiert;"
  //var qrPath = "nicht definiert;"
  var name = "nicht definiert;"
  if(dog.success === 1)
  {
    name = dog.data.name;
    //qrPath = dog.data.qr_code;
    picPath = dog.data.picture;
    email = dog.data.email;
    phone = dog.data.phone;
  }

  const content: ReactNode = dog.success === 1 ?
  <div className = 'Dog'>
  <h1>Hast Du mich gefunden?</h1>
  {/* <p>name: {name}</p>
  <p>email: {email}</p>
  <p>phone: {phone}</p>
  <p>pic: {picPath}</p>
  <p>qr: {qrPath}</p> */}
  <Img pth={picPath} className=''/>
  <DogNameTxt name={name} email={email} phone={phone} />
  </div>
:
<></>;

  return ( content );
}
export default Dog;