"use client";
import { images } from "@/lib/images";
import { Trash } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import React from "react";
import TranslateClient from "./localization/TranslateClient";

type Props = {
  setImageSrc: React.Dispatch<React.SetStateAction<string[]>>;
  imageSrc: string[];
  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
  files: File[];
};

const DragDropImage = ({ imageSrc, setImageSrc, setFiles, files }: Props) => {
  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
  };

  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    // @ts-ignore
    setFiles((prev) => [...prev, files]);
    imageFiles.forEach((file) => {
      const reader = new FileReader();
      reader.onload = (e) => {
        // @ts-ignore
        setImageSrc((prev) => [...prev, e.target.result]);
      };
      reader.readAsDataURL(file);
    });
  };

  const flattenedFiles = files.flat();

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    const files = Array.from(event.target.files || []);
    const imageFiles = files.filter((file) => file.type.startsWith("image/*")); //? incase of preview the image not the text only
    // @ts-ignore
    setFiles((prev) => [...prev, files]);
    const newimageSrc = files?.map((file) => URL.createObjectURL(file));
    setImageSrc((prev) => [...prev, ...newimageSrc]);
  };

  const handleDeleteImage = (index: number) => {
    setImageSrc((prev) => prev.filter((_, i) => i !== index));
    setFiles((prev) => prev.filter((_, i) => i !== index));
  };

  return (
    <div
      onDragOver={handleDragOver}
      onDrop={handleDrop}
      className="w-full flex justify-center items-center flex-wrap"
    >
      <label
        htmlFor="upload-photo"
        className="cursor-pointer w-full flex flex-col justify-center items-center mb-2 gap-2 "
      >
        <div>
          <Image
            src={images.upload}
            alt="upload"
            width={80}
            height={80}
            className="object-cover"
          />
        </div>
       <p className="text-gray-500"><TranslateClient text="click_upload_file" /></p>

      </label>

      <input
        type="file"
        id="upload-photo"
        onChange={handleChange}
        multiple
        accept="image/*,.pdf"
      />
      <div className="flex flex-wrap items-center justify-center gap-5 mt-5">
        {imageSrc?.map((src, index) => {
          console.log({ src });

          return (
            <div
              key={index}
              className="flex items-center justify-center relative"
            >
              <Link
                href={src}
                target="_blank"
                className="text-mainBlue bg-gray-100 hover:bg-gray-200 px-2 rounded-xl"
              >
                {flattenedFiles[index].name}
              </Link>
              <button
                type="button"
                onClick={() => handleDeleteImage(index)}
                className="absolute -top-2 -right-2 bg-red-600 rounded-full w-4 h-4 flex items-center justify-center"
              >
                <Trash className="w-2.5 h-2.5 text-white" />
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default DragDropImage;