import { ResponseT, DogT} from '../context/UserContext';
import { ReactNode } from 'react'
import { useParams } from "react-router-dom";
import Img from './Img';
import DogNameTxt from './DogNameTxt';
import './Dog.css';
import {getDog} from '../services/PhpApi'
import useSWR from 'swr';

const Dog = () => 
{
  // m7MdMK
  const params = useParams();
  const qr_id = Object.values(params)[0];
  var dogRes : ResponseT = {};
  var dog: DogT = dogRes.data;

  const { data, error, isLoading  } = useSWR(['Dog', qr_id], getDog );
  if (error) return (<div>failed to load</div>);
  if (isLoading) return (<div>loading...</div>);

  dogRes = Object.assign({}, data);
  dog = Object.assign({}, data.data);

  var email = "nicht definiert;"
  var phone = "nicht definiert;"
  var picPath = "nicht definiert;"
  //var qrPath = "nicht definiert;"
  var name = "nicht definiert;"
  if(dogRes.success === 1)
  {
    name = dog.name;
    //qrPath = dog.data.qr_code;
    picPath = dog.picture;
    email = dog.email;
    phone = dog.phone;
  }

  const content: ReactNode = dogRes.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} qr_id={dog.qr_id} />
  </div>
:
<></>;

  return ( content );
}
export default Dog;