"use client";
import React, { useRef, useEffect } from "react";
import Image from "next/image";
import FileIcon from "../../../public/assets/FileChat.png";
import PhotoIcon from "../../../public/assets/PhotoChat.png";
import VideoIcon from "../../../public/assets/VideoChat.png";
import { useDispatch } from "react-redux";
import { setFile } from "../store/Slice/FileSelectSlice";
import TextTranslate from "../utils/TextTranslate";

const SelectFile = ({ onClose }: { onClose: () => void }) => {
  const dispatch = useDispatch();
  const popupRef = useRef<HTMLDivElement>(null);

  const handleClick = (accept: string) => {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = accept;
    input.onchange = (e: any) => {
      const file = e.target.files[0];
      if (file) dispatch(setFile(file));
      onClose();
    };
    input.click();
  };

  // Close popup on outside click
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
        onClose();
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [onClose]);

  return (
    <div 
      ref={popupRef} 
      className="grid grid-cols-3 gap-1 p-2 animate-in fade-in zoom-in duration-200 bg-[var(--border-color)] border border-[var(--border-color)] "
    >
      {/* File Option */}
      <div className="flex flex-col items-center  group cursor-pointer">
        <button 
          onClick={() => handleClick(".pdf,.doc,.docx")} 
          className=" p-1 transition-all duration-200 group-hover:scale-105 active:scale-95"
        >
          <Image src={FileIcon} alt="file" className="w-8 h-8 object-contain img-theme invert   " />
        </button>
        <span className="text-[10px] font-medium text-[var(--text-secondary)]">
          <TextTranslate text="File"/>
        </span>
      </div>

      {/* Photo Option */}
      <div className="flex flex-col items-center  group cursor-pointer">   <button 
          onClick={() => handleClick("image/*")} 
         className=" p-1 transition-all duration-200 group-hover:scale-105 active:scale-95 "
         >
          <Image src={PhotoIcon} alt="photo" className="w-8 h-8 object-contain img-theme invert   " />
        </button>
        <span className="text-[10px] font-medium text-[var(--text-secondary)]">
          <TextTranslate text="Photo"/>
        </span>
      </div>

      {/* Video Option */}
      <div className="flex flex-col items-center  group cursor-pointer">   <button 
          onClick={() => handleClick("video/*")} 
          className=" p-1 transition-all duration-200 group-hover:scale-105 active:scale-95 "
        >
          <Image src={VideoIcon} alt="video" className="w-8 h-8 object-contain  invert img-theme  " />
        </button>
        <span className="text-[10px] font-medium text-[var(--text-secondary)]">
          <TextTranslate text="Video"/>
        </span>
      </div>
    </div>
  );
};

export default SelectFile;