import React, { useState } from "react";
import { Modal, Input, Space, Radio, Row } from "antd";

/*
Show info of selected user
Edit Button or cancel - If edit is click show Update or cancel 

PostData fetch function which sends all the data. 
*/

const EditInfo = (props) => {
  // eslint-disable-next-line
  const [users, setUsers] = useState(props.user);
  const [name, setName] = useState(props.user.name);
  const [email, setEmail] = useState(props.user.email);
  const [role, setRole] = useState(props.user.role);
  const [visible, setVisible] = useState(false);

  const postData = async () => {
    await fetch(`/api/v1/auth/edit`, {
      method: "PUT",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + localStorage.getItem("jwt"),
      },
      body: JSON.stringify({
        id: users._id,
        name,
        email,
        role,
      }),
    }).then((res) => res.json);
  };

  const onCreate = async () => {
    setVisible(false);
    email.toString(email);
    await postData();
  };

  const onCancel = () => {
    setVisible(false);
  };

  return (
    <div>
      <p
        type="primary"
        onClick={() => {
          setVisible(true);
        }}
      >
        Edit User info & Role
      </p>
      <Modal
        visible={visible}
        title="Edit a users info"
        okText="Update"
        cancelText="Cancel"
        onCancel={onCancel}
        onOk={onCreate}
      >
        <Row>
          <h5>
            Edit Name :{" "}
            <Input
              defaultValue={users.name}
              onChange={(e) => setName(e.target.value)}
              style={{ width: 300 }}
            />
          </h5>
        </Row>
        <Row>
          <h5>
            Edit Email :{" "}
            <Input
              defaultValue={users.email}
              onChange={(e) => setEmail(e.target.value)}
              style={{ width: 300, marginLeft: 5 }}
            />
          </h5>
        </Row>
        <Row>
          <h5>Edit Role : </h5>
          <Radio.Group
            buttonStyle="solid"
            defaultValue={users.role}
            onChange={(e) => setRole(e.target.value)}
            style={{ marginLeft: 20 }}
          >
            <Space>
              <Radio.Button value="user">User</Radio.Button>
              <Radio.Button value="admin">Admin</Radio.Button>
            </Space>
          </Radio.Group>
        </Row>
      </Modal>
    </div>
  );
};

export default EditInfo;