import React, { useState } from "react";
import { json } from "react-router-dom";

const EditTest = () => {
  const [data, setData] = useState({
    id: "",
    password: "",
    code: "",
    email: "",
  });

  const { id, password, code, email } = data;

  const onChange = (e) => {
    const nextData = {
      ...data,
      [e.target.name]: e.target.value,
    };
    setData(nextData);
  };

  const onSearch = async () => {
    try {
      const response = await fetch("http://localhost:5000/search", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        // 서버에 id를 객체 형태로 전송
        body: JSON.stringify({ id: id }),
      });

      if (response.ok) {
        const result = await response.json(); // 응답을 JSON 형식으로 파싱
        alert("데이터 조회에 성공했습니다.");
        setData(result); // 조회한 데이터로 state 업데이트
      } else {
        alert("해당하는 id의 데이터가 존재하지 않습니다.");
      }
    } catch (error) {
      alert("라우터 접근에 문제가 있습니다: " + error.message);
    }
  };

  const onEdit = async () => {
    try {
      const response = await fetch("http://localhost:5000/edit", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(data),
      });

      if (response.ok) {
        alert("데이터가 성공적으로 전송되었습니다.");
        // 성공적으로 데이터를 보냈다면, 필요한 후속 조치를 여기에 추가할 수 있습니다.
        setData({
          id: "",
          password: "",
          code: "",
          email: "",
        });
      } else {
        alert("데이터 전송에 실패했습니다.");
      }
    } catch (error) {
      alert("라우터 접근에 문제가 있습니다.");
    }
  };

  return (
    <>
      <h1> 데이터 편집하기 </h1>
      <label> ID 입력 :</label> <br />
      <input type="text" name="id" onChange={onChange} value={id} />
      <button onClick={onSearch}>조회하기</button>
      <br />
      <br />
      <label> password 입력 :</label>
      <br />
      <input
        type="password"
        name="password"
        onChange={onChange}
        value={password}
      />
      <br />
      <br />
      <label> code 입력 :</label>
      <br />
      <input type="text" name="code" onChange={onChange} value={code} />
      <br />
      <br />
      <label> email 입력 :</label>
      <br />
      <input type="email" name="email" onChange={onChange} value={email} />
      <br />
      <br />
      <br />
      <button onClick={onEdit}> 편집하기 </button>
    </>
  );
};

export default EditTest;