import React, { useState, useCallback } from "react";

const Test = () => {
  //여기서 드래그 상태를 체크할 거임... 파일 드래그가 된 상태인지, 아닌 상태인지!
  const [isDraggingOver, setIsDraggingOver] = useState(false);

  //파일을 드래그 하자마자 열리는데, 이걸 통해서 드래그 중에는 파일이 열리지 않도록 막을 것이다.
  const handleDragOver = useCallback((e) => {
    e.preventDefault();
  }, []);

  //영역 안으로 파일을 드래그 한 상태라면? 우선은 내부에 발생하는 이벤트는 막는다. 드래그에서 뗄 때 파일을 업로드 할 거니까~ 대신 이쁘게 하기 위해서 isDraggingOver 을 True로 바꾼다!
  const handleDragEnter = useCallback((e) => {
    e.preventDefault();
    setIsDraggingOver(true); // 드래그 시작 상태로 변경
  }, []);

  //영역 밖으로 드래그 중인 게 나간다면? 파일이 열리지 않도록 여기도 이벤트는 막는다. 그리고 나갔으니까 드래그 체크 변수를 False로 변경한다!
  const handleDragLeave = useCallback((e) => {
    e.preventDefault();
    setIsDraggingOver(false); // 드래그 종료 상태로 변경
  }, []);

  //영역 내에서 드래그 중이던 파일을 놓았을 때 발동될 거다. 드래그 상태를 초기화 하고, 메시지를 호출할 거다.
  const handleDrop = useCallback((e) => {
    e.preventDefault();
    setIsDraggingOver(false); // 드롭 후 드래그 상태 초기화
    const droppedFile = e.dataTransfer.files[0]; // 전송된 파일들 중의 0번째 파일의 정보를 뜻함, 업로드가 됐다면 True가 된다는 뜻.
    if (droppedFile && droppedFile.type === "application/json") {
      alert("JSON 파일 드랍에 성공했습니다!");
    } else if (droppedFile) {
      alert("JSON 파일만 업로드해주세요.");
    }
  }, []);

  return (
    <>
      <div
        className={`upload-box ${isDraggingOver ? "drag-over" : ""}`} // 조건부 클래스 추가
        onDragOver={handleDragOver}
        onDragEnter={handleDragEnter} // dragenter 이벤트 핸들러 추가
        onDragLeave={handleDragLeave} // dragleave 이벤트 핸들러 추가
        onDrop={handleDrop}
      >
        <input
          type="file"
          accept=".json"
          id="json-upload"
          style={{ display: "none" }}
        />
        <label htmlFor="json-upload" className="upload-label">
          {isDraggingOver
            ? "여기에 파일을 놓으세요!"
            : "JSON 파일 드래그 앤 드롭 또는 클릭"}{" "}
          {/* 조건부 문구 */}
        </label>
      </div>
    </>
  );
};

export default Test;