import React, { useState } from 'react';
import {getDog} from '../services/PhpApi';
import useSWR from 'swr';

function PreviewUpload({chgFile}:{chgFile: any}) 
{
  const [file, setFile] = useState('');
  const [dimensionWidth, setDimensionWidth] = useState(0);
  const [dimensionHeight, setDimensionHeight] = useState(0);

//  const [dog, setDog] = useState<ResponseT | any>({}); // local dog not the dog in UserContext

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

  console.log('PreviewUpload getDog');
  console.log(data);
  let file_loc: string | undefined = "./uploads"+ data.data.picture;

  const handleChange = async (
    event: React.ChangeEvent<HTMLInputElement>
  ): Promise<any> => 
  {
    // const { target } = event;
    // const img = new Image();
    const ImageName = event.target.value.split('\\')[2];
    const Image = event.target.value;
    console.log('Image on Kevel: ', Image); // Image on Kevel
    console.log('ImageName on Kevel: ', ImageName); // ImageName on Kevel
    console.log('ImageLink on Kevel: ', event.target.value); // ImageLink on Kevel
    console.log('event current Target files: ', event.target.files![0]);

    const fileLoaded = URL.createObjectURL(event.target.files![0]);
    const files = event.target.files;

    console.log('files: ', files);
    const dimensions = await someFunction(fileLoaded);
    setDimensionWidth(dimensions.width);
    setDimensionHeight(dimensions.height);
    console.log('dimensions: ', dimensions);
    console.log('dimensions width: ', dimensions.width);
    console.log('dimensions height: ', dimensions.height);
    setFile(fileLoaded);

    chgFile(event);
  };
  const getHeightAndWidthFromDataUrl = (dataURL: string) =>
    new Promise<{height: number, width: number}>((resolve) => {
      const img = new Image();
      img.onload = () => {
        resolve({
          height: img.height,
          width: img.width,
        });
      };
      img.src = dataURL;
    });
  // Get dimensions
  const someFunction = async (file: any) => 
  {
    console.log('file: ', file);
    const dimensions = await getHeightAndWidthFromDataUrl(file);
    return dimensions;
  };

//  return ( <></> );
  return (
    <div>
      <input
        type="file"
        onChange={handleChange}
        accept="image/jpg,.gif,.png,.svg,.webp audio/wav,.mp3"
      />
      <div className='prevUplImg'>
      <img
        src={file ? file : file_loc}
        style={{
          display: 'flex',
          border: '2px solid tomato',
          maxWidth: '300px',
          maxHeight: '300px',
        }}
      />
      </div>
      {file && <p>Dimensions: {`${dimensionWidth} x ${dimensionHeight}`}</p>}
    </div>
  );
}
export default PreviewUpload;