import React, { useState } from "react";
import { Upload, Image, message } from "antd";
import type { UploadFile, UploadProps } from "antd";
import { PlusOutlined } from "@ant-design/icons";

interface ImageUploadProps {
  value?: string | File | null;
  onChange?: (file: File | null) => void;
  onRemove?: () => void;
}

const ImageUploader: React.FC<ImageUploadProps> = ({
  value,
  onChange,
  onRemove,
}) => {
  const [previewOpen, setPreviewOpen] = useState(false);
  const [previewImage, setPreviewImage] = useState("");

  const fileList: any[] = React.useMemo(() => {
    if (value && typeof value === "string") {
      return [
        {
          uid: "-1",
          name: "image",
          status: "done",
          url: value,
        },
      ];
    }
    if (value instanceof File) {
      return [
        {
          uid: "-1",
          name: value.name,
          status: "done",
          url: URL.createObjectURL(value),
          originFileObj: value,
        },
      ];
    }
    return [];
  }, [value]);

  const beforeUpload: UploadProps["beforeUpload"] = (file) => {
    if (!file.type.startsWith("image/")) {
      message.error("Only image files are allowed");
      return Upload.LIST_IGNORE;
    }

    // Send File to react-hook-form
    onChange?.(file);

    return false; // prevent auto upload
  };

  const handlePreview = async (file: UploadFile) => {
    if (file.url) {
      setPreviewImage(file.url);
      setPreviewOpen(true);
    }
  };

  const handleRemove = () => {
    onChange?.(null);
    onRemove?.();
  };

  return (
    <>
      <Upload
        accept=".jpg,.jpeg,.png"
        listType="picture-card"
        fileList={fileList}
        beforeUpload={beforeUpload}
        onPreview={handlePreview}
        onRemove={handleRemove}
        maxCount={1}
      >
        {!value && (
          <div>
            <PlusOutlined />
            <div style={{ marginTop: 8 }}>Upload</div>
          </div>
        )}
      </Upload>

      {previewImage && (
        <Image
          preview={{
            visible: previewOpen,
            onVisibleChange: setPreviewOpen,
            afterOpenChange: (visible) => !visible && setPreviewImage(""),
          }}
          src={previewImage}
          style={{ display: "none" }}
        />
      )}
    </>
  );
};

export default ImageUploader;