"use client";
import React, { useRef } from "react";
import { UploadFile } from "@/lib/types/models/upload";
import { ExtensionsType } from "@/lib/types/enums";
import { ImageFileSizeMax } from "@/lib/types/constants";
import uploadFileService from "@/lib/services/fileupload";
import { toast } from "sonner";

interface UploadSectionProps {
  setSelectedFiles: (file: UploadFile) => void;
  className?: string;
  title?: string;
}

export default function Page({
  setSelectedFiles,
  className = "",
  title = "Browse Files",
}: UploadSectionProps) {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    const file = e.target.files?.[0];
    if (file) {
      const extensionsType = [
        ExtensionsType.PDF,
        ExtensionsType.JPG,
        ExtensionsType.JPEG,
        ExtensionsType.PNG,
        ExtensionsType.TIF,
        ExtensionsType.TIFF,
        ExtensionsType.EPS,
        ExtensionsType.AI,
        ExtensionsType.SVG,
        ExtensionsType.PSD,
        ExtensionsType.WEBP
      ];
      const fileType = extensionsType.some((el) => file?.name.endsWith(el));
      if (fileType) {
        const sizeInMB = (file?.size / (1024 * 1024)).toFixed(0);
        if (Number(sizeInMB) < ImageFileSizeMax) {
          const response = await uploadFileService.uploadImage(file);

          if (response.success && response?.url) {
            const imagePreviewExtensionsType = [
              ExtensionsType.JPG,
              ExtensionsType.JPEG,
              ExtensionsType.PNG,
              ExtensionsType.SVG,
              ExtensionsType.WEBP
            ]
            const uploadFileType = imagePreviewExtensionsType.some((el) => response.url.endsWith(el));
            let previewImage = response.url;
            let originalUrl = response.url;
            if (!uploadFileType) {
              const convertImage = await uploadFileService.convertImages(response.url);
              if (convertImage.success) {
                previewImage = convertImage.url;
                originalUrl = originalUrl;
              }
            }
            setSelectedFiles({
              image: previewImage,
              original: originalUrl,
            });
          } else {
            toast.error("Failed to file uploaded");
          }
        } else {
          toast.info("File size is less than 200MB.");
        }
      } else {
        toast.info("File not supported");
      }
    }
  };

  const handleBrowseClick = () => {
    fileInputRef.current?.click();
  };

  return (
    <>
      <button onClick={handleBrowseClick} className={className}>
        {title}
      </button>
      <input
        ref={fileInputRef}
        type="file"
        onChange={handleFileSelect}
        className="hidden"
        accept="image/*,.pdf,.ai,.eps,.psd"
        multiple={false}
      />
    </>
  );
}