import { Link } from "react-router-dom";
import React, { useEffect, useState } from "react";
import userApi from "../../apis/user.api";

const INIT_PROFILE = {
  id: "",
  avatarUrl: "",
};

const InfoUpdate = () => {

  const [profile, setProfile] = useState(INIT_PROFILE);

  
  // useEffect(()=>{
  //   setProfile()
  // },[profile])

  const handleChange = async (event) => {
    const { name, files } = event.target;
    let formData = new FormData;
    formData.append("avatarUrl", files[0]);
    const res = await userApi.profileimg(formData);
    console.log(res.img)
    console.log(res.id)
    setProfile({ ...profile, avatarUrl: res.img})
    setProfile({ ...profile, id:res.id})
    };

    const{id,avatarUrl}=profile;

  return (
    <div className="container" style={{ background: "#FCF4FF" }}>
      <div className="row">
        <div>
          <label
            className="form-label mx-2 my-4"
            style={{ fontSize: "18px", fontWeight: "bold" }}
          >
            프로필 정보
          </label>
          <Link to={`/profile/${profile.id}`}>
            <button
              type="button"
              className="btn btn-outline-white "
              style={{
                background: "#d4cafb",
                fontSize: "13px",
                fontWeight: "bold",
              }}
            >
              돌아가기
            </button>
          </Link>
        </div>
      </div>

      <div className="col">
        <div>
          <div className="row">
            <div
              className="d-flex justify-content-center"
              style={{ position: "relative" }}
            >
              <img
                src='/user.png'
                id="imgfile"
                className="rounded-circle mt-2"
                style={{ height: "320px", width: "320px" }}
              />
              <div
                className="d-flex justify-content-end"
                style={{ position: "absolute", left: "295px", top: "30px" }}
              >
                  <label for="inputfile">
                    <img
                      className="rounded-circle"
                      src="/infoimg.jpg"
                      style={{
                        width: "50px",
                        height: "50px",
                        backgroundColor: "white",
                      }}
                    />
                  </label>
                  <input
                    onChange={handleChange}
                    name="avatarUrl"
                    type="file"
                    accept="image/*"
                    id="inputfile"
                    style={{ display: "none" }}
                  />
              </div>
            </div>

            <div className="col d-flex justify-content-center">
              <input
                type="text"
                className="form-control my-4 "
                placeholder="사용자명 입력"
                style={{
                  background: "#fcf4ff",
                  borderTop: "0",
                  borderRight: "0",
                  borderLeft: "0",
                  borderBottom: "1",
                  borderColor: "#d4cafb",
                  height: "38px",
                  width: "130px",
                }}
              />
              <div
                className="justify-content-center ms-2 my-4"
                style={{ fontSize: "25px", fontWeight: "bold" }}
              >
                #{profile.id}
              </div>
            </div>

            <div className="d-flex justify-content-center">
              <label
                class="form-label me-3"
                style={{
                  outline: "none",
                  fontSize: "13px",
                  fontWeight: "bold",
                }}
              >
                현재 비밀번호
              </label>
              <input
                onChange={handleChange}
                type="text"
                class="form-control"
                style={{ height: "38px", width: "200px" }}
              />
              <button
                type="button"
                className="btn btn-outline-white ms-2"
                style={{
                  background: "#d4cafb",
                  fontSize: "13px",
                  fontWeight: "bold",
                }}
              >
                수정하기
              </button>
            </div>
            <div class="col-6">
              <div class="input-group mx-2 my-3">
                <div>
                  <label
                    class="form-label"
                    style={{ fontSize: "13px", fontWeight: "bold" }}
                  >
                    새 비밀번호
                  </label>
                  <input type="text" className="form-control" />
                </div>
                <div>
                  <label
                    className="form-label"
                    style={{ fontSize: "13px", fontWeight: "bold" }}
                  >
                    새 비밀번호 확인
                  </label>
                  <input type="text" className="form-control" />
                </div>
              </div>
            </div>
            <div className="col-6">
              <div className="input-group my-3 ">
                <div>
                  <label
                    className="form-label"
                    style={{ fontSize: "13px", fontWeight: "bold" }}
                  >
                    새 전화번호
                  </label>
                  <input type="text" className="form-control" />
                </div>
                <div>
                  <label
                    className="form-label"
                    style={{ fontSize: "13px", fontWeight: "bold" }}
                  >
                    새 전화번호 확인
                  </label>
                  <input type="text" className="form-control" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default InfoUpdate;