import React from "react";
import { color } from "../../style/varibles";
import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";

import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";

import BtnComponent from "../Base/BTN/Btn";
import FormComponent from "../Base/Form/FormComponent";
import InputComponent from "../Base/Form/Input/InputComponent";
import UserModalComponent from "./UserModalImg/UserModalComponent";

import UserImg from "../../assets/images/User/user.jpg";

const UserModal = ({ modal, click }) => {
  const { user } = React.useContext(AuthContext);
  const InitalState = { name: user.name, email: user.email, profile: user.profile };
  const [userData, setUserData] = React.useState(InitalState);

  console.log(user);

  return (
    <ModalOverlayStyled modal={modal}>
      <UserModalStyled>
        <UserModalComponent img={UserImg} desc="Clique na imagem para alterar" />
        <FormComponent method="get">
          <InputComponent
            id="nome"
            label="Nome"
            type="text"
            value={userData.name}
            onChange={(event) => setUserData({name:event.target.data})}
          />
          <InputComponent
            id="email"
            label="E-mail"
            type="email"
            value={userData.email}
            onChange={(event) => setUserData({email:event.target.data})}
          />
          <InputComponent id="password" label="Senha" type="password" />
          <UserBtns>
            <BtnComponent text="Cancelar" onClick={click} />
            <BtnComponent
              text="Salvar"
              bgcolor={color.status.yes}
              fontcolor={color.pricinpal.blanco}
            />
          </UserBtns>
        </FormComponent>
      </UserModalStyled>
    </ModalOverlayStyled>
  );
};

export default UserModal;

/*{name: 'teste', id: 2, email: 'teste@teste.com', profile: 'master', tokenVersion: 0, …}
email: "teste@teste.com"
id: 2
name: "teste"
profile: "master"
queues: []
tokenVersion: 0 */