import { PlusOutlined } from "@ant-design/icons";
import { Upload, message, Image } from "antd";
import axios from "axios";
import { getSession } from "next-auth/react";
import React, { useEffect, useState } from "react";
import { useSelector } from "react-redux";
import { toast } from "react-toastify";
const getBase64 = file =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });

const ImageUploadPopUp = ({ isUpdate, setimagesArrayComponent, populatedImages, imagesArrayComponent }) => {
  //   const { loadedUser } = useSelector(state => state.loadedUser);
  const [session, setSession] = useState();
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);

  useEffect(() => {
    const fetchSession = async () => {
      setSession(await getSession());
    };
    fetchSession();
    // dispatch(getLoggedInVendor());
  }, []);

  // useEffect(() => {
  //   setFileList(
  //     populatedImages &&
  //       populatedImages.map(item => {
  //         return {
  //           uid: item.id,
  //           name: "image.png",
  //           status: "done",
  //           url: item.imageUrl
  //         };
  //       })
  //   );
  // }, []);

  console.log("fileList", fileList);
  let formData = new FormData();
  // const handleUpload = async () => {
  //   fileList.forEach(file => {
  //     console.log("file", file.originFileObj);
  //     formData.append("files", file.originFileObj);
  //   });
  //   console.log("fileList", fileList);
  //   console.log("formData", formData);

  //   setUploading(true);

  //   try {
  //     const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
  //       headers: {
  //         "Content-Type": "multipart/form-data",
  //         Authorization: `Bearer ${session.jwt}`
  //       }
  //     });
  //     console.log("response image", response);
  //     setimagesArrayComponent(
  //       response.data.map(item => {
  //         return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
  //       })
  //     );
  //     // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
  //     // if (response.status === 200) {
  //     //   message.success("upload successfully.");
  //     //   console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file
  //     // } else {
  //     //   message.error("upload failed.");
  //     // }
  //   } catch (error) {
  //     message.error("upload failed.");
  //   } finally {
  //     setUploading(false);
  //   }
  // };
  const handlePreview = async file => {
    if (!file.url && !file.preview) {
      file.preview = await getBase64(file.originFileObj);
    }
    setPreviewImage(file.url || file.preview);
    setPreviewOpen(true);
  };
  const handleImageChange = async info => {
    console.log("info", info);
    setFileList(info.fileList);
    let formData = new FormData();
    formData.append("files", info.file.originFileObj);
    console.log("foles", formData);
    try {
      const response = await axios.post(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/upload`, formData, {
        headers: {
          "Content-Type": "multipart/form-data",
          Authorization: `Bearer ${session.jwt}`
        }
      });
      console.log("response image", response);
      // if (response.status == 200) {
      //   toast.success("Uploaded successfully");
      // }
      setimagesArrayComponent([...imagesArrayComponent, response.data[0].id]);

      // setimagesArrayComponent(
      //   response.data.map(item => {
      //     return { imageUrl: `${process.env.NEXT_PUBLIC_BACKEND_API_URL}${item.url}` };
      //   })
      // );
      // eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MywiaWF0IjoxNzE2MzY5MzQyLCJleHAiOjE3MTg5NjEzNDJ9.dHTpIvuUi4r4Eh7n-74WKDXUlSaqvhjppGJ-1G4GvHk
      // if (response.status === 200) {
      //   message.success("upload successfully.");
      //   console.log("Uploaded file URL:", response.data[0].url); // The URL of the uploaded file
      // } else {
      //   message.error("upload failed.");
      // }
    } catch (error) {
      message.error("upload failed.");
    } finally {
      setUploading(false);
    }
  };
  return (
    <div>
      <Upload
        //  showUploadList={{ showRemoveIcon: false }}
        listType="picture-card"
        fileList={fileList}
        onChange={handleImageChange}
        onPreview={handlePreview}
      >
        {fileList?.length >= 1 ? null : (
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
          </div>
        )}
      </Upload>
      {/* {previewImage && (
        <Image
          wrapperStyle={{
            display: "none"
            // zIndex: 23
          }}
          preview={{
            visible: previewOpen,
            onVisibleChange: visible => setPreviewOpen(visible),
            afterOpenChange: visible => !visible && setPreviewImage("")
          }}
          src={previewImage}
        />
      )} */}
      {/* <button type="button" onClick={handleUpload} disabled={fileList ? fileList.length === 0 : true} loading={uploading} style={{ marginTop: 16 }}>
        {uploading ? "Uploading" : "Start Upload"}
      </button> */}
    </div>
  );
};

export default ImageUploadPopUp;