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";
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 }) => {
  //   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 = info => {
    console.log("info", info);
    setFileList(info.fileList);
  };
  return (
    <div>
      <Upload showUploadList={{ showRemoveIcon: false }} listType="picture-card" fileList={fileList} onChange={handleImageChange} onPreview={handlePreview}>
        {fileList?.length >= 5 ? 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;