import React, { useState } from "react";

import { Box, Button, TextField } from "@mui/material";
import { ConnectUploadPhotoForm } from "../UploadPhoto";
import { updateProfileNickname } from "../../actions";


const EditProfile = ({ onCloseModall, nickname, userId }) => {
  const [name, setName] = useState(nickname);


  const handleEdit = async () => {
    try {
      updateProfileNickname(userId, name)
      window.location.reload()

    }
    catch (err) {
      console.log(err)
    }

  };

  return (
    <div className="modal">
      <div className="modal_block">
        <h1>Edit Profile</h1>
        <div className="edit_inputs">
          <ConnectUploadPhotoForm />
          <TextField
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            label="Username"
          />
        </div>
        <Box sx={{ gap: "12px", display: "flex", marginTop: "10px" }}>
          <button className="edt_btn" onClick={handleEdit}>
            Save
          </button>
          <button className="cncl_btn" onClick={onCloseModall}>
            Cancel
          </button>
        </Box>
      </div>
    </div>
  );
};

export default EditProfile;
