import { GetServerSideProps, NextPage } from "next";
import { useState } from "react";
import axios from "axios";
import fs from "fs/promises";
import path from "path";
import Link from "next/link";

// interface Props {
//   dirs: string[];
// }

const Home: NextPage = () => {
  const [uploading, setUploading] = useState(false);
  const [selectedImage, setSelectedImage] = useState("");
  const [selectedFile, setSelectedFile] = useState<File>();

  const handleUpload = async () => {
    setUploading(true);
    try {
      if (!selectedFile) return;
      const formData = new FormData();
      formData.append("myImage", selectedFile);
      const { data } = await axios.post("/api/uploadavatar", formData);
      console.log("this is data Vivek:");
      console.log(data);
      console.log("this is data Vivek:");
    } catch (error: any) {
      console.log(error.response?.data);
    }
    setUploading(false);
  };

  return (
    <div className="max-w-4xl p-20 mx-auto space-y-6">
      <label>
        <input
          type="file"
          //   hidden
          onChange={({ target }) => {
            if (target.files) {
              const file = target.files[0];
              console.log("URL.createObjectURL(file)");
              console.log(URL.createObjectURL(file));
              setSelectedImage(URL.createObjectURL(file));
              console.log("file");
              console.log(file);
              setSelectedFile(file);
            }
          }}
        />
        {/* <div className="flex items-center justify-center w-40 border-2 border-dashed rounded cursor-pointer aspect-video">
          {selectedImage ? (
            <img src={selectedImage} alt="" />
          ) : (
            <span>Select Image</span>
          )}
        </div> */}
      </label>
      <button
        onClick={handleUpload}
        disabled={uploading}
        style={{ opacity: uploading ? ".5" : "1" }}
        className="w-32 p-3 text-center text-white bg-red-600 rounded"
      >
        {uploading ? "Uploading.." : "Upload"}
      </button>
      {/* <div className="flex flex-col mt-20 space-y-3">
        {dirs &&
          dirs.map((item) => (
            <Link key={item} href={'/images/' + item}>
              <a className="text-blue-500 hover:underline">{item}</a>
            </Link>
          ))}
      </div> */}
    </div>
  );
};
// export const getServerSideProps: GetServerSideProps = async () => {
//   const props = { dirs: [] };
//   try {
//     const dirs = await fs.readdir(path.join(process.cwd(), '/public/images'));
//     props.dirs = dirs as any;
//     return { props };
//   } catch (error) {
//     return { props };
//   }
// };

export default Home;