/* eslint-disable @typescript-eslint/no-explicit-any */
import { FileInput } from '@/components/common/image-drop';
import { createRequest } from '@/data/request/create-request';
import { getImageUrl } from '@/utils/getImageUrl';
import { FileIcon } from '@phosphor-icons/react';
import { FieldLabel } from '@puckeditor/core';
import { toast } from 'sonner';

const ImagePicker = (props: {
  name: string;
  field: any;
  onChange: (value: any) => void;
  value: any;
}) => {
  const { name, field, onChange, value } = props;

  const fileUploadHandler = async (file: File) => {
    const formData = new FormData();
    formData.append('image', file);
    const res = await createRequest({
      url: '/api/admin/pages/upload-image',
      formData,
    });
    if (res?.success) {
      onChange(res.url);
      toast.success('Image uploaded successfully');
    }
  };

  return (
    <>
      <FieldLabel icon={<FileIcon />} label={field.label}></FieldLabel>
      <FileInput
        id={name}
        defaultValue={getImageUrl(value as string)}
        onChange={(e: File) => fileUploadHandler(e)}
      />
    </>
  );
};

export default ImagePicker;